CodeParkRecord the slow interaction in the Profiler tab, then inspect which components rendered and why.
The steps:
- Open the Profiler tab and click record.
- Perform the slow interaction, then stop.
- Step through the recording. It is split into commits, shown as bars. A commit is one batch of changes React applied to the page.
The flamegraph shows the component tree for one commit:
- A bar's width shows how long the component and its children took.
- Its colour shows the component's own render time.
- Components that did not render are grey.
The ranked chart lists the components of that commit from slowest to fastest.
Turn on the setting to record why each component rendered. The Profiler then tells you whether props, state, hooks or a parent caused it.
In the Components tab settings, turn on highlight updates. It outlines components as they render. This quickly shows components that re-render when they should not. When you need accurate timings, profile a production profiling build.
- Record an interaction, then inspect each commit.
- The flamegraph shows the tree with render times, and grey means the component did not render.
- The ranked chart lists the slowest components first.
- Turn on recording of why each component rendered.
- Use highlight updates to spot unwanted re-renders.