Execution sequence of hooks in React’s functional components.

A few questions have been bothering me for quite some time:

1. What is the execution sequence of code in the functional component?
2. When do hooks like useState useEffect useMemo get executed?
3. What happens to the useEffect hook in the case of SSR?

TLDR; Sorry no TLDR

NOTE: If you're preparing for a frontend engineer’s interview, I suggest you read this

TBH, understanding React’s lifecycle methods is not that difficult, as it mainly consists of 3 phases:

1. Mounting: When the component is actually mounted to the DOM.
2. Updating: When there are any updates in the component and require updating the DOM.
3. Unmounting: When the component is getting removed.

In class components the lifecycle methods are pretty distinct as well which makes things easier for us : componentWillMount componentDidMount componenetDidUpdate etc, etc. But what about functional components?

Functional components can use useEffect with dependencies and a return function to achieve similar behavior:

useEffect(() => {
//some piece of code
return () => {
    // Cleanup code
 };
}, [dependencies])

However, this knowledge is not sufficient to answer the above questions. Hence, I started digging further and came to an understanding.

Here’s the correct sequence of events during the first render of a functional component:

1. What is the execution sequence of code in the functional components?

The function gets executed in the same way that any other regular function would do in JavaScript. Top to bottom.

2. When does the hooks like useState useEffect useRef etc get executed?

To answer this question, we need to understand the render phase and the commit phase.

In React, the rendering process is divided into two main phases: the “render phase” and the “commit phase.” These phases are responsible for different tasks and ensure that updates to the user interface are applied efficiently and consistently.

Render Phase:

• In the render phase, React determines what changes need to be made to the component’s Virtual DOM based on any updates to props or state.
• First, it creates a new Virtual DOM based on the current state (and prop) of the component.
• Then, React performs a process called “reconciliation,” where it compares the current Virtual DOM with the previous Virtual DOM to identify the differences (or “diffs”) using the diffing algorithm.
• The output of this phase is a list of instructions, also called Patches, that describes the minimum set of operations needed to update the real DOM to match the new Virtual DOM.
• The patches can include the following types of operations:

1. INSERT: Insert a new node into the DOM at a specific position.
2. REMOVE: Remove a node from the DOM at a specific position.
3. UPDATE: Update the properties of an existing node in the DOM.
4. MOVE: Move a node from one position to another in the DOM.
5. TEXT: Update the text content of a node in the DOM.

Commit Phase:

• The commit phase is the phase in which the changes identified during the render phase are actually applied to the real DOM.
• React applies the patches generated during the render phase to the real DOM, updating the DOM accordingly.
• This process ensures that the DOM updates are performed efficiently and batched together when possible to minimize unnecessary reflows and repaints.
• After the commit phase, the component has been successfully updated in the DOM, and any side effects (e.g., executing useEffect hooks) are also triggered.

By now you might have already found the answer:

Here’s the correct sequence of events during the first render of a functional component:

1. Execution of Hooks:

• React executes hooks like useState, useMemo, useCallback, useRef, and any other custom hooks you may have defined in the order they appear in the component's function body.

2. Calculation of JSX:

• After executing all the hooks, React continues with the rest of the component’s function logic, including calculations, conditional statements, and any other operations determining the JSX to be returned.

3. Returning JSX:

• The JSX (Virtual DOM representation) is returned by the component’s function, representing the UI to be rendered.

4. Commit Phase (Execution of useEffect):

• React moves on to the commit phase after the JSX is returned and the Virtual DOM is constructed.
• React looks for any useEffect hooks declared in the component in the commit phase and executes their effect functions.

3. What happens to theuseEffect hook in the case of SSR?

The useEffect doesn’t get executed as there is no DOM in the server and there is no commit happening in SSR.

I hope you found this article useful. I would love to hear your thoughts. 😇

Thanks for reading. 😊

Cheers! 😃

If you find this article useful, you can show your appreciation by clicking on the clap button. As the saying goes, ‘When we give cheerfully and accept gratefully, everyone is blessed’.