React Hooks - Understanding the useEffect Hook

React Hooks - Understanding the useEffect Hook

Understanding the useEffect Hook

Shaydee Coder's photo
Shaydee Coder
·

4 min read

Since I started working with React Hooks, I've finally had a grasp of how useEffect works.

If you already have experience working with the life-cycle methods in class components, useEffect shouldn't be difficult for you to understand.

Just as in a class component, useEffect uses the different phases of a component's life-cycle in a functional component. If you're wondering what the life-cycle phases are, here you go;

  1. Initial Rendering/Mounting Phase
  2. Updating Phase
  3. Unmounting Phase

Initial Rendering/Mounting Phase

This is the phase when the component is about to start it's life journey and make it's way to the DOM.

Updating Phase

Once the component gets added to the DOM it can potentially update and re-render only when a prop or state change occurs.

Unmounting Phase

This is the final phase of a component's life-cycle in which the component is removed from the DOM.

1. The Initial Rendering Phase of useEffect

The useEffect function accepts two parameters, a call-back function and the life-cycle phase as a second parameter i.e when you want the call-back function to be executed.

The second parameter could be left empty, and if you need to add a second parameter, it would always be an array. Either an empty array or an array containing a piece of state.

Whenever an empty array is used as a second parameter, it means the call-back function inside the useEffect should be executed in the initial rendering phase e.g.

useEffect(() => {}, []);

2. The Updating Phase of useEffect

When an array holding a piece of state is used as the second parameter, it means the call-back function should be executed in the initial rendering phase and also in the updating phase i.e when the state in the array is changed or updated e.g.

useEffect(() => {}, [data]);

When a second parameter is not declared, it means the call-back should be executed in the initial rendering phase and whenever ANY state is changed or in the initial rendering phase and EVERYTIME the component is updated e.g.

useEffect(() => {});

3. The Unmounting Phase of useEffect

Now let's discuss the unmounting phase of the useEffect Hook, this hook returns only one thing which is a function, it doesn't return any other thing except a function. Before proceeding with the unmounting phase, let's discuss in detail useEffect and asynchronous functions.

The useEffect hook doesn't accept an asynchronous function as a callback function. If you need to use an asynchronous function in useEffect, then you will have to use it in a callback function and not directly, as a callback function e.g.

useEffect(() => {
    // Your asynchronous function here inside the callback function
    async () => {}
});

Let's get back to the unmounting phase of useEffect, remember that this hook only returns a function, this returned function is not called immediately whenever useEffect is executed. This returned function is stored in memory and only runs just before another execution of the same useEffect where the function was returned.

Let me walk you through an example that will help you grasp the concept more;

useEffect(() => {
    console.log("1. The useEffect logic");

    /* The unmounting phase */
    return () => {
         console.log("2. The unmounting phase");
    }
});

The above code snippet would log to the console 1. The useEffect logic in the first execution of the useEffect callback function. Now, because the useEffect has been executed once, the returned function is then stored in memory waiting for the useEffect to be executed for the second time.

// Console output
// 1. The useEffect Logic

When the useEffect is executed the second time, the returned function stored in memory during the first execution would then be executed before running the second execution of the useEffect hook. Now, the console output would look like this:

// Console output
// 2. The unmounting phase
// 1. The useEffect logic

After the second execution, the returned function is then stored again in memory patiently waiting for another useEffect call to trigger its execution, and this is how the cycle goes on over and over again.

Wow! You read it all till this point 😊, I hope this was helpful understanding how useEffect work in a functional component?

Thank you for reading this far 😊

ReactReactHooks