Making Sense of the Profiler Results

In this lesson, let's discuss how commits are useful and how to read the information provided by them.

React Phases

Conceptually, React does work in two phases:

  • The render phase where components are rendered and the virtual DOM diffed.

  • The commit phase where actual changes in the virtual DOM are committed to the DOM.

The graphical representation you see on the far right of the profiler represents the number of commits that were made to the DOM during your interaction with the app.

Whenever you interact with the app components, a commit happens.

Get hands-on with 1200+ tech skills courses.