Skip to content
A flowchart that explains the new lifecycle of a Hooks component.
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.all-contributorsrc docs: add gaearon as a contributor (#4) Mar 10, 2019
.gitignore Initial commit Mar 10, 2019
.npmignore add arrows in the swim lanes Mar 10, 2019
LICENSE Initial commit Mar 10, 2019
hook-flow.drawio smaller arrow heads and parent re-render Mar 11, 2019
hook-flow.png smaller arrow heads and parent re-render Mar 11, 2019 Version 1.1.0 Mar 10, 2019


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


MIT Licensed


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!

You can’t perform that action at this time.