⚛ React Hooks: Lifecycle Diagram

Function Components Lifecycle Visualised

⚛️🪝⌛

Introduction and Motivation
Following Dan Abramov’s diagram tweet (and its React implementation) about the lifecycle of the now “old” 👴 Class Components, I wanted to have a diagram exactly like that but for Hooks — so …
I made one! using draw.io and Dan’s style for familiarity.

React Hooks Diagram
You could find the interactive diagram and source code on my GitHub.
All of the latest React versions are supported.

• Diagram 🌐
• Source code 👨‍💻

Wavez/react-hooks-lifecycle

Diagram Screenshot

I maintain and update the diagram regularly, so be sure to catch up when React will introduce more new hooks 🥳 as they intend ;

From the official React documentation 💬 :
“There are no Hook equivalents to the uncommon getSnapshotBeforeUpdate and componentDidCatch lifecycles yet, but we plan to add them soon.”

I hope it’ll make the migration to the new React features easier.
Feel free to comment, contribute and use the diagram 💖.

Feel welcome to reach out and say Hi 👋 or visit any of my socials:
Twitter | GitHub | StackOverflow

If you liked this post 👏 SMASH 👏 that clap button below. (Image by Yonatan Doron)