The <Profiler> component reports each commit
Liking only commits inside Feed, so only the Feed profiler reports. Toggling dark mode renders App, which renders both subtrees. Add console.log(actualDuration) to see timings: they vary on every run, which is why they aren't in the expected output.
Measure before optimising: the React DevTools Profiler records every commit and shows which components rendered, why, and for how long; the <Profiler> component reports the same data to your code; and the browser's Performance panel shows the whole picture, including layout, paint and long tasks.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Wrap a ProductGrid in a <Profiler> and log a warning whenever an update takes longer than one frame (16 ms).
A memoised Row still shows in the DevTools flame graph on every keystroke, with the reason "Props changed: (style)". What's the likely cause and fix?
Explain it without notes
Why should you measure in a production build?
What does the React DevTools Profiler show, and how does "why did this render" help?
Explain the arguments of a <Profiler>'s onRender callback.
When would you use the browser's Performance panel instead of React DevTools?
Preview
Console
Nothing logged yet.Expected console output
[Profiler] Sidebar mount
[Profiler] Feed mount
--- like (state inside Feed)
[Profiler] Feed update
--- toggle dark (state in App)
[Profiler] Sidebar update
[Profiler] Feed update