In this article we are going to introduce a new feature called React Hooks that every React developer should know and use them, they will make your code cleaner, more organized and consistent.
useState:
The purpose of this hook is to handle reactive data, any data that changes in the application is called state and when the state changes you will update the UI by reflecting the new changes.
The hook useState takes one optional argument which is the default state. The function returns an array that contains two values you can use in your component. These destructured values are the state which is the first value and a setter used to set it (the second value).
useEffect:
To understand this component we need to know the component’s lifecycle:
● componentDidMount(): component mounted (added to the UI)
● componentDidupdate(): component data changes
● componentWillUnmount(): component removed from the UI (unmounted)
useEffect hook allows us to implement logic for all of these lifecycle methods with a single functional API.
useEffect is a function that takes a function you define as its first argument, this function will run when the component is mounted (available in the UI) and the state changes.
You can run this function any time a specific state data has changed, you can do that by adding a dependencies array to the useEffect function and put in it the value that you want to track.
We also can use this hook to run some code when the component is destroyed, the way we implement this is by returning a function from our use effect callback. React will take that function and call it before the component is unmounted (removed from the UI).
useContext:
This hook allows you to work with React context API which is a mechanism used to share values throughout the component tree (share data without passing props).
Let’s say for example that we have an object called setting that contain two values for user setting:
To share these setting across multiple disconnected components we can create a context:
If we want to scope the setting in a part of our application we will use a context provider and any child component will inherit that value without passing any "props":
And here appears useContext hook which allows us to consume the current value from the context provider which may live many levels higher in the component tree.
useContext hook is a cleaner replacement for the context consumer if you worked with it in the past.
useRef:
This hook will allow you to create an immutable object to keep the same reference between renders.
A more common use case for useRef is grabbing html elements from the DOM.
useReducer:
What this hook does is similar to setState, but it’s a different way to manage the state using the redux pattern.
Instead of updating a state directly you dispatch an action that goes to a reducer function which determines how to compute the next state.
Just like useState, useReducer returns an array of two values, one is the state and the other is a function that dispatches an action which will trigger the reducer function.
A reducer function is something that you define as the argument to useReducer hook with the initial state as a second one.
The reducer function takes the current state and the action as arguments and uses these two values to compute the next state.
useMemo:
This hook helps in optimizing computation cost to improve performance, it’s commonly used with expensive computations.
Instead of computing in every render we can memoize the value. We write a function that returns the computed value with dependencies as a second argument to determine when this computation should be run.
useCallback:
When you define a function in a component a new function object is created every time the component is rerendered, in some cases you may also want to memoize the function.
A common use case when you pass the same function to child components. By wrapping the function in useCallback we can prevent unnecessary rerenders of the children because they are using the same function object.
