React useEffect Hook Tutorial – A Complete Guide

In this tutorial, you will see a complete guide about react useEffect() hook and how to use it in the function component.

In ReactJS, functional components are some of the most-used components. Because the function components require less coding than class-based components, most developers prefer to use them.

In the function components, the two hooks mostly used are useState() and 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.

See Also: How to Install ReactJS and Create an Application?

Let’s get started!

React useEffect Hook

The react 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.

useEffect(<function>, <dependency>)

If you’re familiar with react class lifecycle methods, you can think of useEffect Hook working the same as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

Import useEffect

To import the useEffect from react, you have to write down the following line at the top of your component.

import { useEffect } from "react";

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.

useEffect(() => {
   //Runs on every render
});

import { useState, useEffect } from "react";

function PageTimer() {
   const [count, setCount] = useState(0);

   useEffect(() => {
      setTimeout(() => {
         setCount((count) => count + 1);
      }, 1000);
   });

   return <h2>Page rendered {count} times!</h2>;

}

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.

useEffect(() => {
   //Runs only on the first render
}, []);

import { useState, useEffect } from "react";

function PageTimer() {
   const [count, setCount] = useState(0);

   useEffect(() => {
      setTimeout(() => {
         setCount((count) => count + 1);
      }, 1000);
   }, []); // [ ] empty array dependency

   return <h2>Page rendered only {count} times!</h2>;

}

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 state or 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.

useEffect(() => {
   //Runs on the first render
   //And any time when dependency value changes
}, [prop, state]);

import { useState, useEffect } from "react";

function PageTimer() {
   const [message, setMessage] = useState("");
   const [count, setCount] = useState(0);

   useEffect(() => {
      const msg = `You clicked ${count} times`;
      setMessage(msg);
   }, [count]); // count state dependency

   return (
      <h2>{message}</h2>

      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
   );

}

So in the above code, we have 2 states count and 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.

import { useState, useEffect } from "react";

function PageTimer() {
   const [count, setCount] = useState(0);

   useEffect(() => {
      let timer = setTimeout(() => {
         setCount((count) => count + 1);
      }, 1000);

      return () => clearTimeout(timer); // clean up effect
   }, []); // [ ]empty array dependency

   return <h2>Page rendered only {count} times!</h2>;

}

Conclusion

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.

See Also: React useState Hook Tutorial – A Complete Guide