Does my React app render too often?

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

The number of re-renders is not a performance metric. If you are worried about potential performance problems, check out How Many Re-Renders are Too Many.

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 gives a 1000 foot view 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 like dragging or updates on mouse move, React Developer Tools Profiler is the best tool. It also provides additional information like the cause of re-render, the render time, etc.

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.