Identify and optimize inefficient code

React uses the browser’s User Timing API to mark events and measure the time between them.

For example, in the Chrome browser, the Developer tools Performance tab has a Timings section that uses the User Timing API. You can use the Timings section to identify tasks that are CPU-intensive, so you can target these tasks for potential improvements.

It is a good idea to run your browser in private browsing mode (for example, an incognito window in Chrome) when running performance timings. This ensures that results are not affected by cached content and that most extensions are disabled.

In addition to your browser’s native developer tools, you can also install the React DevTools profiler and use it to identify widgets and other components that take a long time to run or are rendered multiple times.