In this tutorial, you will see a complete guide about react useEffect() hook and how to use it in the function component.
In the function components, the two hooks mostly used are
useEffect(). The useState() hook is used to declare and track the component’s state and the useEffect() hook is used to modify the DOM elements.
So in this tutorial, we will learn about the
useEffect() hook to modify the DOM elements.
Let’s get started!
React useEffect Hook
useEffect() hook lets us perform side effects in function components like updating the DOM elements, fetching data, counter, etc.
The useEffect() hook function accepts the two arguments. The first argument will be function and the second argument will be dependency but optional.
If you’re familiar with react class lifecycle methods, you can think of useEffect Hook working the same as
To import the useEffect from react, you have to write down the following line at the top of your component.
Let’s take examples of each scenario using the useEffect() hook in react.
With No Dependency
In this case, we will take an example of useEffect that has passed no dependency. It means that we will only pass the function and it will run on every render.
In the above code, we made the function component “PageTimer” and set the default value of the
count is 0.
Then we initialize the useEffect hook by setting the time out function and incrementing the
count state every second. So this useEffect hook will run on every time when count state changes.
With Empty Array Dependency
Now we will pass the empty array (
[ ]) to useEffect hook as a dependency. It means that the hook will run only on the first render. See the following syntax of how to pass an empty array in useEffect hook.
The above code has an empty array (
[ ]) and will render the component only once and set the state for only when the first time rendered.
With Props or State Dependency
In this scenario, we will pass the
props in the array as dependencies and then the hook will directly depend on them.
We will pass the multiple state or props with commas separated. So this hook will trigger on the first render and also when state or props changes happen.
So in the above code, we have 2 states
message. And we made a hook function with a dependency
count state and it will trigger when the
count state changes.
When we click on a button then we are changing the count state by 1 increment, so every time when you click on the button, state changes will happen and show the message based on that.
useEffect with Cleanup
We see in the above examples how to use the
useEffect() hook. Some of the effects are that don’t need to cleanup memory.
But some effects need to be cleaned up as per the use of a hook purpose. For example, subscriptions, timers, etc need to clean up at the end of useEffect hook.
Clean-up is very important in these cases to prevent the memory leak. See the following example code of cleanup by returning a function.
So in this tutorial, you learned about useEffect hook in react and how to use it by importing it from react package.
You also learned the three different scenarios of the useEffect() hook while having no dependency, with an empty array, and with state or props as dependencies.
And In the end, you see why the effect requires cleanup to reduce the memory leak and how you can do it by returning a function.
Hope you understand all the code but if you still have any questions please ask me in the comment section, I will respond to you as soon as possible.