Profiling renders

The React DevTools Profiler records which components rendered, how long each took and why. Measure before optimising: most slowness is a few components rendering far more often than they need to.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Explain what the Profiler records and what "why did this render" means
Record a profile and find the component rendering most often
Spot the profile taken on a development build

In practice

A few lines that show Profiling renders doing its job.

TSX

import { Profiler } from "react";

function onRender(id: string, phase: string, actualDuration: number) {
  if (actualDuration > 16) console.log(id, phase, actualDuration.toFixed(1) + "ms");
}

<Profiler id="OrdersTable" onRender={onRender}>
  <OrdersTable rows={rows} />
</Profiler>

The common mistake

Watch for

Profiling a development build and treating the numbers as real. Development React is several times slower; measure the production build when deciding what to optimise.

What to know first

Your roadmap puts these before Profiling renders, unless you already know them.

Memoisation

How it stays learned

Once a session shows you understand Profiling renders, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Memoisation

Previous in the module← Code splitting