React-Hook flow: A flowchart that explains the new lifecycle of a Hooks component. https://dwe.st/hf

hook-flow

All Contributors

React Hooks were introduced in version 16.8.0. They are a complete departure from class component lifecycle events. For more information, see the official React Hooks API Reference.

Here is a flow diagram that explains the new flow of a Hooks component.

Flow Diagram

This flow diagram is also available as a PDF file.

flow chart

Open in browser

To quickly open the Hook Flow Diagram in your default browser, you can execute the following from your terminal. Commit this to memory! ?

$ npx hook-flow

License

MIT Licensed

Contributors

Thanks goes to these wonderful people (emoji key):

Donavon West
Donavon West

? ? ? ? ? ?
Revel Carlberg West
Revel Carlberg West

? ?
Dan Abramov
Dan Abramov

? ?

This project follows the all-contributors specification. Contributions of any kind welcome!

Comments

  • add Linus support (beyond OSX support)
    add Linus support (beyond OSX support)

    Mar 20, 2019

    open command on Linux attempt to open a new terminal. OSX uses open to view a image or a web page, Linux equivalent is xdg-open.

    Reply
  • Question:What does the color on the picture mean ?
    Question:What does the color on the picture mean ?

    Mar 15, 2020

    Question:What does the color on the picture mean ?

    The colors don't seem to match the ones listed in Chrome's performance panel. So what is the color here saying?

    截屏2020-03-15下午6 14 59
    Reply
  • The npx command is unix only
    The npx command is unix only

    Jul 25, 2020

    Running the npx command on Windows prints a confusing "The System cannot find the path specified" error message. Any objections to using https://www.npmjs.com/package/open instead?

    Reply
  • fix: support opening hook-flow cross-platform
    fix: support opening hook-flow cross-platform

    Nov 2, 2020

    Support for opening hook flow diagram in multiple platforms. This pull request aims to fix this issue https://github.com/donavon/hook-flow/issues/8

    Reply
  • Dashed line between Render and React Updates DOM is probably concurrent mode only.
    Dashed line between Render and React Updates DOM is probably concurrent mode only.

    Aug 14, 2021

    The legend does not clarify what is the difference between a dashed and solid lines (would be nice if it would).

    I can only guess that a dashed line mean "even loop released" and any stages connected by a solid line are part of the same sync task.

    If I'm wrong, then the rest of this issue is not valid.

    We are having a bit of a debate on a bug in an "official" React example, and I wrote a codesandbox that shows you can only have a setInterval callback invoked after useLayoutEffect or useEffect.

    image

    Concurrent mode

    Initially I gathered that the dashed line between Render and React Updates DOM is only valid in concurrent mode, but as [this codesandbox demonstrates, in concurrent mode it seems that nowhere between Render and Run Effects there should be a dashed line:

    image

    Reply
  • docs: add gaearon as a contributor
    docs: add gaearon as a contributor

    Mar 10, 2019

    Adds @gaearon as a contributor for ideas, design.

    This was requested by donavon in this comment

    Reply
  • docs: add revelcw as a contributor
    docs: add revelcw as a contributor

    Mar 10, 2019

    Adds @revelcw as a contributor for ideas, design.

    This was requested by donavon in this comment

    Reply
  • docs: add donavon as a contributor
    docs: add donavon as a contributor

    Mar 10, 2019

    Adds @donavon as a contributor for ideas, infra, maintenance, review, code, design.

    This was requested by donavon in this comment

    Reply
  • What are LayoutEffects?
    What are LayoutEffects?

    Mar 11, 2019

    I don't know what LayoutEffects are. Maybe you can add another note explaining the term.

    Reply
  • Add All Contributors
    Add All Contributors

    Mar 10, 2019

                                                                                                                                                                                                           
    Reply