Thu May 11 2023

UseEffect hook in React - mount, unmount and dependency array

Since React version 16.8, we got introduced to hooks and for most part, we now write functional components with hooks instead of class components with the life-cycle methods like componentDidMount and componentDidUpdate for example.

In this guide we will cover some important and useful knowledge of the useEffect hook in React, which one of the most important hooks to know about. UseEffect allows us to perform side effects in our React component, such as data fetching and changing the DOM through state updates for example. The effect hook will be called when something is changed in the state, when mounted and unmounted - basically each time the component is rendered and re-rendered. We can specify as many hooks as we want, and configure them to be called on different times - we will show examples in this guide.

useEffect without dependency array

By default, useEffect will be called on every render. And we will specify it as follows

import { useEffect, useState } from "react";

const Example = () => {
  const [number, setNumber] = useState(0);

  useEffect(() => {
    console.log(`Number: ${number}`);
  });

  return <div onClick={() => setNumber(number + 1)}>{number}</div>;
};

The effect hook will now be called when the component is mounted, and when the state variable number is changed.

Mount

If we want to do something only one time, for example on component mount, we can specify the hook as follows

useEffect(() => {
  console.log(`Component is mounted`);
}, []);

By setting an empty dependency array, it will only run one time - when the component is mounted.

Unmount

If we want to clean something up, like intervals or network subscriptions - we can provide a clean up function as well, that will be called then the component is unmounted. The implementation looks like this

useEffect(() => {
  console.log(`Component is mounted`);
  return () => {
    console.log("Component will unmount");
  };
}, []);

By returning a function inside of the hook, we can clean up our component since it will be called then the component will unmount.

Listen to specific updates

If we want something to happen only when certain things are updated, we can make use of the dependency array. In below example, we will set up two hooks that will trigger on different states.

const Example = () => {
  const [number, setNumber] = useState(0);
  const [evenNumber, setEvenNumber] = useState(0);

  useEffect(() => {
    console.log(`Number is now: ${number}`);
    if (number % 2 === 0) {
      setEvenNumber(number);
    }
  }, [number]);

  useEffect(() => {
    console.log(`I will only trigger on evenNumber: ${evenNumber}`);
  }, [evenNumber]);

  return <div onClick={() => setNumber(number + 1)}>{number}</div>;
};

So when the number is changed (on every click) the first useEffect hook will run, and if the number is even the hook will set the evenNumber state to the number, and our second hook will be called.

Common mistake

One mistake that is quite common, is that we are using variables inside of our hooks but forget to add them in the dependency array, this is especially common when our array is containing a lot of dependencies.

Example:

const Example = () => {
  const [number, setNumber] = useState(0);
  const [otherNumber, setOtherNumber] = useState(0);

  useEffect(() => {
    console.log(`Number is now: ${number} and otherNumber is: ${otherNumber}`);
  }, [number]);

  return (
    <div>
      <button onClick={() => setNumber(number + 1)}>{number}</button>
      <button onClick={() => setOtherNumber(otherNumber + 1)}>
        {otherNumber}
      </button>
    </div>
  );
};

We are now logging two numbers in our hook, but when we are updating the state of otherNumber, nothing will happen in our hook since it is not in the dependency array. Most editors are highlighting this with a warning like React Hook useEffect has a missing dependency: 'otherNumber'. Either include it or remove the dependency array, but not always. So if you encounter weird behaviour with your hooks, always check the dependency array as a first step when debugging!