How to check when reacting components receive visualization or repeat playback

Question

Is there a way to get the logs from which all React components will be processed or overwritten when any event / action is executed. I just want to check if any unwanted React component is getting. I know that we could achieve this by adding the console to the rendering function, componentWillReceiveProps or componentWillUpdate. But I have a number of components in my webapp. Adding console statements to each component would be futile. Is there a better way?

Answer 1

A good option is to visualize the React components on a chronological scale. This allows you to see which components are precisely mounted, updated and unmounted, and how much time they take relative to each other. This feature has been added as part of React 15.4.0 release. You can take a look at the official blog to get a better idea, but, summing up, these are the steps to launch it and launch it:

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

• Click the Timeline Chrome DevTools tab and click Record.

• 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 User Timing.

,

Answer 2

rauliyohmc . , , , , (.. , DOM), action-addons-perf. printWasted, .