What are render phase and commit phase in react dom?

There are two phases in which React DOM operates

  • Render phase
  • Commit phase

In render phase, React DOM calculates the changes that needs to be committed to DOM, while in commit phase, React DOM actually commits those changes. One of the major difference between render phase and commit phase is that render phase can be called multiple times, but commit phase is called only once for a change.

Render phase

Render phase is when React does DOM diffing and comparing the previous render view with the 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 the 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 to render phase methods.

Like, calling an API in the render phase may make multiple API calls for the same change. For example, if you are making a call to the server to log the error in getDerivedStateFromError the method, then it may call the server multiple times for the 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. 

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