React Component lifecycle

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.
• Component’s render() method is called. React updates the DOM with the render() method’s output.
• Once the component’s output is inserted in the DOM, React calls its componentDidMount() method.
• If the component is removed from the DOM, React calls its componentWillUnmount() method.

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

• Mounting
  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()
• Updating
  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()
• Unmounting
  • componentWillUnmount()
• Error handling
  • static getDerivedStateFromError()
  • componentDidCatch()

Sources

• The Component Lifecycle | React docs
• State and Lifecycle | React docs
• React lifecycle diagram

TODO

• Visualize the process.