2 Apr 2022

Does my React app render too often?

Worried that some of your React components may be re-rendering too often? There are two simple ways to check this.

Quick visual overview

The simplest way to check how many times React components render is by using the "Highlight updates when components render" option in React DevTools. However, this only provides a high-level overview of what's happening. It may not be efficient enough for cases with rapid updates.

Detailed report for rapid updates

For cases with rapid state updates, such as dragging or updates on mouse movement, the React Developer Tools Profiler is the best tool. It also provides additional information like the cause of re-renders, render time, and more.

1. Record a profiling session
2. In the flame chart, click on any particular component
3. The sidebar will show every time this component was rendered and how much time every render took