Hook flow
Last updated
Last updated
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:
Mount
Update (when state changes based on any event)
UnMount
Once the lazy initializers are called react renders the JSX defined in the return Statement of the component to its Virtual DOM.
Once the Virtual DOM is updated React updates the real DOM.
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.
This Phase executed the code inside a useLayoutEffect hook.
In this Phase, the Browser paints the updated DOM screen.
In here the functions returned in the useEffect hook get executed.
This Phase executed the code inside a useEffect hook.
Run the lazy initializer (functions passed to useState or useReducer)
Continue the rest of the render function
React updates the DOM
It runs LayoutEffects
Browser paints the screen to reflect
Runs the effects
Runs the render phase
React updates DOM
Cleanup LayoutEffects first
Run LayoutEffects
Browser paints the screen
Cleanup the effects first
Run the effects in the render
Cleanup LayoutEffects
Cleanup Effects
Never confuse them with lifecycle methods in Class Components.
A great example of hook flow i found is Kent c dodds example :
