There are two phases in which React operates

  • Render phase
  • Commit phase

Render phase

Render phase is a phase where React does dom diffing and comparing the previous render view with current one for determining the changes. React calls following methods during render phase

  • constructor
  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate
  • getDerivedStateFromProps
  • shouldComponentUpdate
  • render
  • setState

Commit phase

In this phase, React actually commits the changes to DOM. Some of the methods called during commit phase in React are as follows

  • componentDidMount
  • componentDidCatch
  • componentDidUpdate

What is difference between these two phases?

The render phase methods can be called multiple times for a change, but the commit phase methods are called only once for a change in production mode. This means that side-effects functions should not be used in render phase methods.

Like, calling a api in render phase may make multiple api calls for the same change. For example, if you are making a call to server to log the error in getDerivedStateFromError method, then it may call the server multiple times for same error.

class App extends Component{
...

  static getDerivedStateFromError(error){
    // this is wrong.
    // getDerivedStateFromError is return new state for an error to show fallback UI
    // not to call an async api call. 
    ErrorService.logError(error)
  }
  
...
}

So the method such as componentDidCatch should be used for such side-effects to handle error.