Understanding "Hooks Flow" is very important and sometimes even experienced React developers miss a few points.
Thanks to "Donavon" for sharing the beautiful flow diagram.
React Hooks flow includes:
- Update (when state changes based on any event)
- 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
Update: (When the user make any event it update the state)
- 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
Unmount: Component gets removed from the screen (navigate to other screen or from user event)
- Cleanup LayoutEffects
- Cleanup Effects
Note: Never confuse them with lifecycle methods in Class Components.
Let's share more about hooks in the comments below.