React Lifecycle Methods diagram
An interactive version of React Lifecycle Methods diagram tweeted by Dan Abramov. Built in React, obviously.
I did my best to make the diagram fully accessible, both for keyboard navigation and screen readers for visually impaired people.
Online version is also available!
How to use the diagram
- Click any method name to read its official documentation (opens in a new tab).
- Methods in bold are the most common ones.
- Actions that are not methods, but otherwise help reading the diagram, are in italics.
You are welcome to raise issues and create pull requests.
You can also add a new version of the diagram in case React lifecycle methods are changed. There is a separate versions guide in case you get lost.
To contribute, you need to have the following prerequisites installed:
- IDE of your choice
Starting the project
yarn install(first time only)
Building the project
The MIT License.
Thank you to all our sponsors! Become a sponsor and get your image on our README on GitHub.
Thank you to all our backers! Become a backer and get your image on our README on GitHub.
Thank you to all our contributors that helped on this project!