React Hooks - Understanding the useEffect Hook
Tags: react, reacthook, useeffect, lifecycle
Published: 2021-09-11 08:02:40

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.

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(() => {}, []);
```

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(() => {});
```

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 details about `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 😊