ReactJS: Taking a Look at useEffect Hook’s Execution.

Photo by XPS on Unsplash

This article assumes that you’ve used or have been using useEffect hook. I shall be covering its execution and following this article,

I will be posting more articles on this hook covering the caveats, bad practices, how to use useEffect effectively when dependencies change frequently and how to use useEffect as a callback.

In this article, we’ll take a look at the following:

• Execution: When and order in which the hook is rendered.
• Execution: When a child component is involed.
• Execution: When a custom hook that uses useEffect is involved.

Sandbox

Following is the link to codesandbox containing the code used in this article. https://codesandbox.io/s/github/arbaz52/reactjs-useEffect-hook-execution

Execution

Screenshot from ReactJS Documentation on useEffect

Documentation mentions that by using this hook, we tell react that your component needs to do something after the it is done rendering.

IMPORTANT: After the component is done rendering, it checks each useEffect hook sequentially in order which they are written. Going through each useEffect hook in the component (that has done rendering). If any of the entry in the dependency array has changed, the callback associated with it/passed to it is run.

Following example sandbox demonstrates the execution of this hook.

Example Code to Demonstrate useEffect Hook’s Execution.

Result: Console Logs

Explaination

If you look at the above picture, we can trace out when and in which order the callbacks are executed/called.

Firstly, the component is rendered that is why the 1) & 2) are executed first. After the component has finished rendering, the first useEffect is processed and its callback is executed, then the next useEffect is processed and then the last one.

Before moving forward

Now that you know the execution of useEffect hook is executed, we can move to the next example.

Scenario 1: Introducing Child Component

During the execution of the parent component, if a child component needs to be rendered, the parent component’s render is halted. The child component starts rendering and after its (child component’s) rendering is complete, its (child component’s) set of useEffect hooks are processed. After it’s done, parent component’s render is resumed.

Following example sandbox demonstrates the scenario:

Example Code to Demo Execution when a Child Component is Involved.

Result: Console Logs

Scenario 2: Introducing Custom Hooks

When a custom hook is involved which has a useEffect hook inside it, it follows the execution pattern of the component in which it is being used.

The set of useEffect hooks written inside the custom hook are processed after the component it is written in completes rendering. The order of execution depends in the order they’re written inside the component. If the custom hook is called at the start of the component before the component’s set of useEffect hooks, custom hook’s set of useEffect are processed first and vice versa.

The following example sandbox demonstrates the scenario:

Example Code to Demo Execution when a Custom Hook using useEffect hook is used.

Result: Console Logs

Firstly, the component is rendered, after it has finished rendering, the custom hook’s set of useEffect hooks are processed, after that the set of useEffect hooks written after the custom hook’s usage are processed.

Embedded Sandbox

Conclusion:

Basic understanding of how, when and in what order useEffect hook is processed helps a lot in coming up with an easy to understand, track-able and stable solution to a problem.

I hope you got something out of this article and would love to have a conversation about it.