React Hooks (into The Future of React)
Author: Amandeep Kochhar, Software Developer
July 2, 2020 | SimbaQuartz
July 2, 2020 | SimbaQuartz
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:
useState()
useEffect()
useContext()
useReducer()
useRef()
useState()
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
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()
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.
.png)
.png)
