React Hooks (into The Future of React)

This article will be explaining about the React Hooks. Working as a Software Engineer at SimbaQuartz, I use React as the frontend with React Hooks in Projects every other day. So I thought why don’t I try to put up a short summary about the popular newly introduced “Hooks” in React.

Since React v0.14, we’ve had two ways to create components — classes or functions. The difference was that if our component had state or needed to utilize a life-cycle method, we had to use a class based component. Otherwise, if it just accepted props and rendered some UI, we could use a functional components.

Hooks”, (available from React v16.8.0) which now allows us to use features of stateful components in functional components. Hooks are basically functions that let us include react state and life-cycle features without using Classes too.

These five are the Most popular React Hooks used in almost every other React Project:

  1. useState()
  2. useEffect()
  3. useContext()
  4. useReducer()
  5. useRef()

useState()

Stateful function components can now use the state just like the class based components using the new function useState. It takes an initial state as an argument, and returns the current state and an updater function. The setState it returns is almost the same used by class components, it can accept a callback that gets the current state as an argument, but it doesn’t automatically merge top-level object keys.

useEffect()

A lot of components have to kick off different types of effects as part of mounting or re-rendering. Fetching data, subscribing to events. But the code for implementing these types of effects ended up scattered across componentDidMount(), componentDidUpdate(), and componentWillUnmount() in the class based components. Use effect simplifies all these cases.

useEffect accepts a function as a callback as first parameter and a set of values as second parameter to which the callback function needs to re-run. This is equivalent to componentDidUpdate() and if we pass an empty array as second parameter then useEffect starts to act just like componentDidMount(). We can also return a function from the useEffect hook which will be equivalent to componentWillUnmount().

useContext()

The context API is great and was a significant improvement in usability compared to what existed before. However, context can be cumbersome to use. It has to be used as a render prop, which is a pattern that doesn’t compose gracefully. If you need values out of multiple different render props, you quickly end up making the code verbose. useContext accepts the value created by the existing React.createContext function and returns the current value from that context provider. The component will re-render whenever the context value change, just like it would for state or props.

useReducer()

The reducer/action pattern is one of the most powerful benefits of Redux. One of the challenges to using Redux, however, is gluing it all together. Action creators, which components to connect(), mapStateToProps, using selectors, coordinating asynchronous behavior and all that.In small projects where we don’t feel to use such heavy lifting of Redux, we can make use of the useReducer hook. useReducer provides same reducer/action pattern having many of the same benefits as Redux with less conceptual overhead.

useRef()
Sometimes when writing components, we end up with information that we need to keep track of but don’t want to re-render when it changes. For instance, an input node that we need to track the cursor position for or imperatively focus. useRef provides a mechanism for these cases. It creates an object that exists for as long as the component is mounted, exposing the value assigned as a current property.


SimbaQuartz  
Empowering Businesses With Technology

Mandeep Kaur Sidhu

Chief Executive Officer

Mandeep Kaur Sidhu is the founder and CEO of SimbaQuartz - an IT Consulting & Web Development Service Platform located in Tangra, a rural location in Punjab. Mandeep is an active contributor to the development of society with several initiatives taken to enhance employment in rural India with her other ventures namely SimbaCart, MTrophies, & SimbaCourse.  For her high social spirit and greatly rewarding entrepreneurship, she has appeared as a speaker, twice at TEDx, corporates, the United States, IITs/IIMs and many other elite institutes, delivered topics on Entrepreneurship, Digital Marketing & Philanthropy.She has successfully organized 500+ social campaigns under the mission of 50000 Shoe To Give, Food Sharing, etc. Her venture has been awarded as “The Upcoming Start-up of The Year 2016” by ASSOCHAM India and received an Alumni Award for Social Entrepreneurship in 2019.

Leadership

Mandeep Singh Sidhu

Acting CTO & IT
Advisor

Lorem ipsum dolor sit amet, consectetur adipiscing elit Dcibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Mandeep Kaur Sidhu

Chief Executive Officer

Mandeep Kaur Sidhu is the founder and CEO of SimbaQuartz - an IT Consulting & Web Development Service Platform located in Tangra, a rural location in Punjab. Mandeep is an active contributor to the development of society with several initiatives taken to enhance employment in rural India with her other ventures namely SimbaCart, MTrophies, & SimbaCourse.  For her high social spirit and greatly rewarding entrepreneurship, she has appeared as a speaker, twice at TEDx, corporates, the United States, IITs/IIMs and many other elite institutes, delivered topics on Entrepreneurship, Digital Marketing & Philanthropy.She has successfully organized 500+ social campaigns under the mission of 50000 Shoe To Give, Food Sharing, etc. Her venture has been awarded as “The Upcoming Start-up of The Year 2016” by ASSOCHAM India and received an Alumni Award for Social Entrepreneurship in 2019.

Key Personnel

Dilsher Singh

Sr. Manager Creatives

Pramod Sai Naik
     Megavath

Asst. Project Manager

Jobanjit Singh

Sr. Software Engineer

Vishal Pandey

AGM- Operations & General Management

Manjot Singh

Sr. Software Engineer

From blog

Contact

Web Design
Ecommerce
Development
Others
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.