React 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 these functions are not available. 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.
Run lazy initializers
In this Phase React call the lazy initializers defined in the useState hook. You can read more about lazy initializers in the official React docs.
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.
References
I got the idea for this post from the GitHub repository of Donavon West.
