Understanding React useEffect Hook

React hooks are very useful functions provided with React functional component and one of them is the React useEffect hook. We do also cover other hooks like useContext, useMemo.

What is React useEffect

To perform side-effects functionality in React Class Components, there are methods such as componentDidMount and componentDidUpdate to allow performing operations within React’s component lifecycle.

With functional component gaining popularity, React useEffect hook is available for developers to write side-effects to these components. They perform similar functionality with the original lifecycle methods but in an improved manner.

Official useEffect documentation.

How to work with React useEffect

First of all, React useEffect takes in 2 arguments. One is a callback function and the other is an array of dependencies. Once any of the dependencies is updated, the callback function will be executed. Note that useEffect is called after every render.

If we do not pass in an array as dependency, the code inside the callback function will execute after every render. Below shows an example where the code will execute after every render.

import { useEffect } from 'react';

const someComponent = () => {
  useEffect(() => {
    console.log('Print every render.');
  });
};

If we want to perform something during componentDidMount step, we have to indicate by putting an empty array as dependency. Usually, this step is also use to perform operations like initial page load data fetching.

import { useEffect } from 'react';

const someComponent = () => {
  useEffect(() => {
    console.log('Print only on first time render.');
  },[]);
};

To execute the side effect after some variable or state is updated, we add the variable inside the dependency array. This is similar to componentDidUpdate lifecycle method.

import { useEffect } from 'react';

const someComponent = (props) => {

  useEffect(() => {
    // Print out the name on the first render
    console.log(props.name);
  },[]);

  useEffect(() => {
    console.log(props.name);
  },[props.name]);
};

As seen from the example above, it is possible to have multiple useEffect code block in a functional component. Each of the useEffect will execute independently.

Cleanup Function

In order to do something after the component unmount, we can write a return function in useEffect callback argument. This function is also known as a cleanup function and it will be executed when the component unmount.

Since the cleanup function runs after every unmount, we can use it to perform operations that will cleanup what is created in the previous effect.

import { useEffect } from 'react';

const someComponent = (props) => {

  useEffect(() => {
    console.log(props.name);

    return () => {
      console.log('Running this code on component unmount.');
    };
  },[props.name]);
};

Conclusion

Comparing between the use of componentDidUpdate and useEffect, it shows that useEffect can have multiple code blocks in a component where componentDidUpdate only can appear once. Thus, useEffect hook allow better coding structure where you can separate the logics which also make code more readable.