In a nutshell
React components undergo several stages as they are created, initialized, updated, and destroyed:
- Component constructor is called. State and props are initialized with their default values.
render()method is called. React updates the DOM with the
- Once the component’s output is inserted in the DOM, React calls its
- If the component is removed from the DOM, React calls its
Here‘s a diagram that visualizes these stages.
Note: React’s Strict Mode alters the lifecycle behaviour by double-invoking some methods like
render. If you are trying to understand the component lifecycle by tinkering with the lifecycle methods, you might want to turn off Strict Mode.
More comprehensive lifecycle reference
- Error handling
- Visualize the process.