Tracking renders in a React app?

Question

Is there any way to track renders in your app while still using plain components? I'd like to use it for performance monitoring and testing to make sure that renders are in the correct ballpark during updates.

Answer 1

In the development mode, you can visualize how components mount, update, and unmount, using the performance tools in supported browsers. For example:

To do this in Chrome:

• Load your app with ?react_perf in the query string (for example, http://localhost:3000/?react_perf).

• Open the Chrome DevTools Performance tab and press Record.

• Perform the actions you want to profile. Don't record more than 20 seconds or Chrome might hang.

• Stop recording.

• React events will be grouped under the User Timing label.

Note that the numbers are relative so components will render faster in production. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur.