useEffect Hook – Reactjs
React Hooks are the feature that was introduced in React version 16.8, allowing us to use state and other class components features in our functional components. Out of all the hooks introduced, there is one salient hook named the UseEffect.
The useEffect hook is a boon for the functional components. It basically allows us to execute side effects in our functional components. Side effects here are referring to api calls to the backend server, interacting with browser APIs, i.e. using document or window, and unanticipated timer functions such as setTimeout and setInterval. In short, the side effects are those whose results are in general unpredictable.
However, we can perform side effects without using the mentioned hook within the component body itself.
Consider the below example:
Here we are making an API call in the document body. It might not throw an error , but would definitely hamper the rendering process, which is why this is not the right technique. We can make use of useEffect for these side effects.
Below are the steps to use the UseEffect hook in our functional components:
- Import it from “react”
- Call it above the returned JSX
Syntax:
useEffect takes two parameters:
1. Callback function
This is where the required side effect is performed, which is called right after our component renders.
2. Array Of Dependencies
This parameter is optional. By default, useEffect runs after every render, even the first one. With the help of the array parameter, we can call useEffect only after a particular state update by passing that state variable into this array.
Now consider the following example:
There are two state variables; counter and inputValue. Counter state variable is being updated with the click of the Increment button. And whenever we would increment the value of counter the console in the useEffect hook will be printed. The reason being, we have passed the counter state variable in the dependency array parameter of the useEffect hook.
On the other hand, the same hook won’t be called whenever we update the inputValue variable, since we haven’t passed it in the array parameter. If we would have done so, the console in useEffect would have been called on both the state variables updation i.e., the counter and the inputValue variable.
useEffect provides the functionality of three life cycle methods to the functional components:
- componentDidMount()
Once we pass an empty array as a second parameter in the useEffect hook, it runs only once, i.e. at the time of component mounting.
Syntax:
- componentDidUpdate()
For the hook to be called at a certain state update or more than one state update, we have to pass those state variables in the array of dependencies.
This also includes being called at mounting as well.
Syntax:
Taking into consideration the above example, the useEffect hook will be called at the time of mounting as well as whenever counter and inputValue state variables are updated.
- componentWillUnmount()
To have the hook implemented just as componentWillUnmount, we will have to return a function from it.
Syntax:
Here, the console in the function returned from useEffect will be called when the component unmounts.
Hence, any necessary action to be performed during unmounting can be performed here.
Principally, actions in unmounting are executed to perform cleanup. Cleanup here is referring to cleaning up the code before the component gets unmounted for ex., clearing the interval. The cleanup can prevent memory leaks and remove unwanted things.
Some use-cases for the same are:
- Clean up subscriptions
- Clean up modals
- Remove event listeners
- Clear timeouts
