Measure before you optimize
Guessing about performance wastes effort. The React DevTools Profiler records a session and shows which components rendered, how long each took, and why they rendered.
- A commit is one batch of updates applied to the DOM
- The flamegraph shows render duration by component
- The ranked chart lists the most expensive renders first
Reading the why
DevTools can show what triggered a render, props, state, hooks, or a parent. This points you straight at wasted renders, like a component re rendering because of an unstable object prop.
- Enable record why each component rendered in settings
- Look for components that render but produce no visible change
- Watch for a single change cascading into a wide subtree
Turning findings into fixes
Once you see the culprit, apply a targeted fix, memo, a stable callback, or colocated state, then profile again to confirm the gain. Do not optimize what the profiler shows is already cheap.
Profiling loop
Key idea
The DevTools Profiler shows which components render, how long they take, and why, so you can target real hotspots with a fix and re profile to confirm it helped instead of guessing.