Do you know React Hooks Flow?

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:

1. Mount
2. Update (when state changes based on any event)
3. UnMount

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

Note: Never confuse them with lifecycle methods in Class Components.

Let's share more about hooks in the comments below.