React component lifecycle

React component has specific phases as mentioned below.
  • Mounting phase
  • Updating phase
  • Unmounting phase
  • Error Handling phase
Lifecycle methods in each of these phases are listed below.

Mounting phase

This is the phase where component is rendered for the first time on page.
  • constructor() - This method gets executed once component is created and executed before component is mounted in DOM
  • static getDerivedStateFromProps() - This method replaces old method componentWillReceiveProps and used to update the state.
  • render() - This method gets called to mount the component.
  • componentDidMount() - After render method execution is completed, component is mounted and then componentDidMount() method gets called.

Updating phase

This is the phase when component re-renders due to change in state or props. Remember that call to setState() does not mean that it will re-render the component.
  • static getDerivedStateFromProps()
  • shouldComponentUpdate() - We can control here if component should be rendered or not. If this method returns true, component will be re-rendered.
  • render()
  • getSnapshotBeforeUpdate() - Stores the previous state of component before update
  • componentDidUpdate() - gets called after component is re-rendered/updated.

Unmounting phase

This phase has just one lifecycle method - componentWillUnmount

Error phase

  • static getDerivedStateFromError()
  • componentDidCatch()

Complex problems, Simple Solutions