Hook flow

But what exactly is the React Hook Flow?

You probably already know the Lifecycle Methods like componentDidMount or componentDidUpdate. These are used in Class Components. Since most of the time, it’s easier to write a functional component . For this, the React Core Team introduced hooks in Version 16.8. Hooks get called in a specific order, and that’s what we call the hook flow.

React Hooks flow includes:

1. Mount

2. Update (when state changes based on any event)

3. UnMount

Definition

Render

Once the lazy initializers are called react renders the JSX defined in the return Statement of the component to its Virtual DOM.

React updates DOM

Once the Virtual DOM is updated React updates the real DOM.

Cleanup LayoutEffects

If you have defined a useLayoutEffect which is a very rare case, react will call the function returned from the hook. You can read more about cleanup functions in the official React docs.

Run LayoutEffects

This Phase executed the code inside a useLayoutEffect hook.

Browser paints screen

In this Phase, the Browser paints the updated DOM screen.

Cleanup Effects

In here the functions returned in the useEffect hook get executed.

Run Effects

This Phase executed the code inside a useEffect hook.

Phases

Mount:

1. Run the lazy initializer (functions passed to useState or useReducer)

2. Continue the rest of the render function

3. React updates the DOM

4. It runs LayoutEffects

5. Browser paints the screen to reflect

6. Runs the effects

Update: (When the user make any event it update the state)

1. Runs the render phase

2. React updates DOM

3. Cleanup LayoutEffects first

4. Run LayoutEffects

5. Browser paints the screen

6. Cleanup the effects first

7. Run the effects in the render

Unmount: Component gets removed from the screen (navigate to other screen or from user event)

1. Cleanup LayoutEffects

2. Cleanup Effects

Never confuse them with lifecycle methods in Class Components.

A great example of hook flow i found is Kent c dodds example :

References and articles :

Hooks API Reference – React

GitHub - donavon/hook-flow: A flowchart that explains the new lifecycle of a Hooks component. https://dwe.st/hfGitHub

Understand the React Hook Flowegghead