Clever Geek Handbook

Tracking rendered in React app?

Is there a way to track the rendering in your application when using simple components? I would like to use it for performance monitoring and testing to make sure the renders are in the correct step during updates.

+3


source to share


1 answer


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

To do this in Chrome:



  • Load your application using the response_perf command in the query string (for example, http: // localhost: 3000 /? React_perf ).

  • Open the Chrome DevTools Performance tab and click Write.

  • Follow the steps you want to profile. Do not record for more than 20 seconds or Chrome may freeze.

  • Stop recording.

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

Note that numbers are relative, so components will render faster in production. However, it should help you understand when the unrelated UI is being updated by mistake and how deep and how often the UI is updated.

+3


source






More articles:


All Articles