Yeah Yeah - 3 years ago 106
React JSX Question

Tracking renders in a React app?

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 Source

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

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download