URL: http://imgh.us/react-lifecycle.svg

I don't know who made this flowchart originally, but whoever you are: Thank you!

At this point, in my React learning I think I've memorized much of this but it's taken me a lot of time and having to dig up the documentation again. (Also, not to mention the number of times I've typo'ed componentWillReciveProps and componentWillRecevieProps etc.)

Remember this; You don't need to know all of these by heart to be good at React. In fact, there's several of these that I almost never use.

React lifecycle hooks flowchart

UPDATE

The above link is dead. Use this blog post instead.

UPDATE April 2018

Here's an even better one from @dan_abramov:

React life-cycle hooks

Comments

Rodrigo García

Yeah! Dan Abramov's schema is way better and cristal clear! Thank you.

Your email will never ever be published.

Previous:
Fastest *local* cache backend possible for Django August 4, 2017 Python, Web development, Django
Next:
Fastest way to match a filename's extension in Python August 31, 2017 Python
Related by category:
Switching from Next.js to Vite + wouter July 28, 2023 JavaScript, React
How to SSG a Vite SPA April 26, 2025 JavaScript, React
An ideal pattern to combine React Router with TanStack Query November 18, 2024 JavaScript, React
swr compared to @tanstack/react-query August 30, 2024 JavaScript
Related by keyword:
4 different kinds of React component styles April 7, 2016 React, JavaScript
Component, component function or plain function in React February 6, 2018 React