React Grimoire
  • ⁉️Introduction
  • πŸ§‘β€πŸŽ“πŸ§‘πŸŽ“ React Fundamentals
    • The Basic javascript "Hello world"
    • Basic view on React core API's
    • JSX
    • React Props and styling
    • Components
    • Handling Events With React
    • Form
    • Array and Lists
    • Class Component State
    • Class Component Life Cycle
    • PropTypes
  • πŸͺReact Hooks
    • Intro to hooks
    • useState
    • useEffect
    • useRef
    • useContext
    • useMemo
    • useCallback
    • useReducer
    • useLayoutEffect
    • useImperativeHandle
    • Hook flow
    • Custom hooks
      • useDebugValue
    • React 18 hooks
  • πŸ““React Guidelines
    • React Components Composition Guidelines
    • React hooks guidelines
    • The use of Memoization
    • Lifting State Up
  • πŸ”­Concepts
    • Advanced Patterns
      • Compound Components Pattern
      • Control Props Pattern
      • Props Getters Pattern
      • Custom hook pattern
      • Context Module
      • State Reducer
    • React Under the hood
      • 🏁What is "Rendering"?
      • 🏁React Lifecycle
      • 🏁Reconciliation & Virtual DOM in React
      • 🏁Fiber
    • ⏰Concepts to always have in mind
  • 🧩React ecosystem
    • Forms Tools
      • React Hook Form VS Formik
    • TypeScript
      • 🏁Conditional React props with TypeScript
    • 🏁Build tool choice for MVP projects
    • A CSS methodology comparison
      • 🏁Post CSS processor :Sass
      • 🏁CSS in js :Styled-components
      • 🏁Utility Classes: Tailwind
  • ⁉️Testing
    • In Progress
  • 🎭Performance
    • in Progress
  • πŸš€Deployment
    • In Progress
  • πŸ–ΌοΈDesign system
    • 🏁What's a design system anyway ?​?
  • πŸ”—Us-full links
    • Typescript and React basic tutorial
    • React-philosophies
    • React new doc
Powered by GitBook
On this page
  • Definition
  • Render
  • React updates DOM
  • Cleanup LayoutEffects
  • Run LayoutEffects
  • Browser paints screen
  • Cleanup Effects
  • Run Effects
  • Phases
  • Mount:
  • Update: (When the user make any event it update the state)
  • Unmount: Component gets removed from the screen (navigate to other screen or from user event)
  • References and articles :

Was this helpful?

Edit on GitHub
  1. React Hooks

Hook flow

PrevioususeImperativeHandleNextCustom hooks

Last updated 3 years ago

Was this helpful?

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
Logo
Logo
Logo