How to know a component's render times

Question

As the title shows, Can i know how many times when a class component or a functional component render? Is there any chrome extension or webpack plugin? And now i just can get this by console.log.

just console.log to log the times.

Answer 1

You should use react-devtools:

1. Install react-devtools extension.
2. While on a development environment, excess your browser dev tools.

2. Go to Profiler tab
3. Press Start-Profiling

4. Examine the snapshot

Dashboard Component (0.6ms of 86.ms) - Rendered at 1.3 for 83ms

Refer to official walkthrough video of the profiler on YouTube.