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:
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.
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().
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.
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.
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.