Re-render Profiling — React Deep Dive

the four re-render reasons (that's all there are)

Every wasted render traces to exactly one of four causes. The React DevTools Profiler records each commit (a render+paint cycle) and shows a flamegraph (component tree with render times), a ranked chart (components sorted by cost), and — with "Record why each component rendered" on — the commit reason for every component. Click a bar to read its reason.

reason	trigger	who re-renders
parent re-rendered	any ancestor rendered	all non-memoized descendants (the default cascade)
state changed	`useState` / `useReducer` setter	that component + its non-memoized descendants
context changed	a `Provider` value updated	every `useContext` consumer — bypasses memo
props changed	parent passed a new reference / value	the child — a `React.memo` child only if the prop fails shallow `Object.is`

Fixes map 1:1 to causes: React.memo blocks parent-cascade & prop-wiggle; useMemo/useCallback stabilize props so memo can skip; splitting context limits context blast radius; moving state down limits the cascade.

1 · the profiler you write (edit me)

// Re-render profiling simulator.
// Models what the React DevTools Profiler shows: each commit (render batch)
// lists which components rendered and WHY (parent/state/context/props), plus
// the memo SKIPS (the grayed bars in the real flamegraph).
var COMMITS = [];   // [{n, phase, ms, entries:[{component, reason, rendered}]}]
var BUFFER = [];    // render logs collected during the current commit
var HINT = {};      // {ComponentName: reason} — set by each click handler
var TELL = null;    // CommitLog re-render trigger (set in useLayoutEffect)

// The profiled tree + memoization map (used to annotate skips in each commit).
var TREE = ['Parent', 'ChildA', 'ChildB', 'ChildC'];
var MEMO = { Parent: true, ChildA: false, ChildB: true, ChildC: false };

function logRender(component, reason) {
  BUFFER.push({ component: component, reason: reason });
}

// <Profiler onRender> fires once per commit, AT THE END — the perfect flush point.
function flushCommit(id, phase, actualDuration) {
  var rendered = {};
  var i, name;
  for (i = 0; i < BUFFER.length; i++) rendered[BUFFER[i].component] = BUFFER[i].reason;
  var entries = [];
  for (i = 0; i < TREE.length; i++) {
    name = TREE[i];
    if (rendered[name]) {
      entries.push({ component: name, reason: phase === 'mount' ? 'mount' : rendered[name], rendered: true });
    } else if (phase !== 'mount') {
      // Component did NOT render this commit. If it is memoized (or under a
      // memoized ancestor), it was SKIPPED — exactly the gray bars in DevTools.
      entries.push({
        component: name,
        reason: MEMO[name] ? 'memo skipped (props/context unchanged)' : 'ancestor skipped',
        rendered: false
      });
    }
  }
  if (entries.length > 0) {
    COMMITS.push({
      n: COMMITS.length + 1,
      phase: phase,
      ms: Math.round(actualDuration * 100) / 100,
      entries: entries
    });
  }
  BUFFER.length = 0;
  HINT = {};
  if (TELL) { try { queueMicrotask(TELL); } catch (e) { TELL(); } }
}

function reasonFor(name, fallback) {
  return HINT[name] || fallback;
}

var Profiler = React.Profiler;
var ThemeContext = React.createContext({ on: false });

// ChildA — plain function component. Always follows its parent (no memo).
// Also owns local state, so "Update ChildA Only" re-renders JUST this one.
function ChildA() {
  var s = React.useState(0); var n = s[0]; var setN = s[1];
  logRender('ChildA', reasonFor('ChildA', 'parent re-rendered'));
  return (
    <div data-testid="child-a" className="p-2 rounded border border-[#30363d] bg-[#0d1117]">
      <div className="flex items-center justify-between gap-2">
        <span className="text-[#e6edf3] text-sm">ChildA <span className="text-[#8b949e]">(plain)</span></span>
        <span className="text-[#61dafb] text-xs">n={n}</span>
      </div>
      <button
        data-testid="upd-childa"
        className="mt-2 px-2 py-1 text-xs bg-[#61dafb] text-[#0d1117] rounded font-bold hover:opacity-80"
        onClick={function () { HINT = { 'ChildA': 'state changed' }; setN(function (x) { return x + 1; }); }}
      >
        Update ChildA Only
      </button>
    </div>
  );
}

// ChildB — React.memo + a prop that changes on parent update. Skipped when the
// prop is stable (e.g. during a context toggle, where Parent is skipped).
var ChildB = React.memo(function ChildB(props) {
  logRender('ChildB', reasonFor('ChildB', 'props changed'));
  return (
    <div data-testid="child-b" className="p-2 rounded border border-[#30363d] bg-[#0d1117]">
      <span className="text-[#e6edf3] text-sm">ChildB <span className="text-[#8b949e]">(React.memo)</span></span>
      <span className="block text-[#61dafb] text-xs mt-1">count={props.count}</span>
    </div>
  );
});

// ChildC — useContext consumer. Re-renders on context change EVEN IF its parent
// was memo-skipped: context updates propagate through memoized ancestors.
function ChildC() {
  var ctx = React.useContext(ThemeContext);
  logRender('ChildC', reasonFor('ChildC', 'parent re-rendered'));
  return (
    <div data-testid="child-c" className="p-2 rounded border border-[#30363d] bg-[#0d1117]">
      <span className="text-[#e6edf3] text-sm">ChildC <span className="text-[#8b949e]">(useContext)</span></span>
      <span className="block text-[#61dafb] text-xs mt-1">theme.on={String(ctx.on)}</span>
    </div>
  );
}

// Parent — React.memo with NO props from App. So an App re-render (context
// toggle) SKIPS Parent and its non-consumer children — only ChildC wakes up.
var Parent = React.memo(function Parent() {
  var s = React.useState(0); var c = s[0]; var setC = s[1];
  logRender('Parent', reasonFor('Parent', 'state changed'));
  return (
    <div data-testid="parent" className="p-3 rounded-lg border border-[#61dafb] bg-[#0b0f14]">
      <div className="flex items-center justify-between gap-2 mb-2">
        <span className="text-[#61dafb] text-sm font-bold">Parent <span className="text-[#8b949e] font-normal">(React.memo)</span></span>
        <span className="text-[#61dafb] text-xs">parentCount={c}</span>
      </div>
      <button
        data-testid="upd-parent"
        className="mb-3 px-3 py-1 text-xs bg-[#61dafb] text-[#0d1117] rounded font-bold hover:opacity-80"
        onClick={function () {
          HINT = { 'Parent': 'state changed', 'ChildA': 'parent re-rendered', 'ChildB': 'props changed', 'ChildC': 'parent re-rendered' };
          setC(function (x) { return x + 1; });
        }}
      >
        Update Parent State
      </button>
      <div className="grid grid-cols-1 gap-2">
        <ChildA />
        <ChildB count={c} />
        <ChildC />
      </div>
    </div>
  );
});

// CommitLog — lives OUTSIDE the <Profiler> so its own re-renders don't loop.
// useLayoutEffect sets TELL and bumps once to pick up the mount commit.
function CommitLog() {
  var r = React.useState(0); var bump = r[1];
  React.useLayoutEffect(function () {
    TELL = function () { bump(function (x) { return x + 1; }); };
    bump(function (x) { return x + 1; });
    return function () { TELL = null; };
  }, []);
  var recent = COMMITS.slice(-6).reverse(); // newest first
  return (
    <div data-testid="commit-log" className="mt-3 p-3 rounded-lg border border-[#30363d] bg-[#010409]">
      <div className="text-xs text-[#8b949e] mb-2">commit timeline (newest first) · {COMMITS.length} total</div>
      {recent.length === 0 ? (
        <div className="text-[#8b949e] text-xs">no commits yet</div>
      ) : (
        <div data-testid="commits" className="space-y-2">
          {recent.map(function (commit) {
            return (
              <div data-testid="commit" data-commit-n={commit.n} data-phase={commit.phase} key={commit.n} className="p-2 rounded border border-[#30363d] bg-[#0d1117]">
                <div className="text-xs text-[#61dafb] font-bold mb-1">#{commit.n} · {commit.phase} · {commit.ms}ms</div>
                <div className="grid grid-cols-1 gap-1">
                  {commit.entries.map(function (e, idx) {
                    return (
                      <div data-testid="entry" data-component={e.component} data-rendered={e.rendered ? 'true' : 'false'} key={e.component + idx} className={"text-xs px-2 py-1 rounded flex justify-between " + (e.rendered ? 'bg-[#161b22]' : 'bg-[#0d1117] opacity-60')}>
                        <span className={e.rendered ? 'text-[#e6edf3]' : 'text-[#8b949e] line-through'}>{e.rendered ? '●' : '○'} {e.component}</span>
                        <span className="text-[#8b949e]">{e.reason}</span>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function App() {
  var s = React.useState(false); var ctxOn = s[0]; var setCtxOn = s[1];
  // useMemo so the Provider value keeps the SAME reference unless ctxOn flips —
  // otherwise every App render would notify every consumer for nothing.
  var value = React.useMemo(function () { return { on: ctxOn }; }, [ctxOn]);
  return (
    <div className="max-w-md mx-auto p-4 bg-[#161b22] rounded-xl border border-[#30363d]">
      <h2 className="text-lg font-bold text-[#61dafb] mb-2">Re-render Profiler</h2>
      <button
        data-testid="toggle-ctx"
        className="mb-3 px-3 py-1 text-xs bg-transparent border border-[#61dafb] text-[#61dafb] rounded font-bold hover:opacity-80"
        onClick={function () { HINT = { 'ChildC': 'context changed' }; setCtxOn(function (x) { return !x; }); }}
      >
        Toggle Context (theme.on={String(ctxOn)})
      </button>
      <Profiler id="tree" onRender={flushCommit}>
        <ThemeContext.Provider value={value}>
          <Parent />
        </ThemeContext.Provider>
      </Profiler>
      <CommitLog />
    </div>
  );
}

createRoot(document.getElementById('root')).render(<App/>);

2 · Babel compiles JSX → element tree

<Profiler id="tree" onRender={'{flushCommit}'}> wraps the subtree. React calls flushCommit(id, phase, actualDuration, ...) at the end of every commit — the moment to drain BUFFER into a visible commit. The phase arg is "mount", "update", or "nested-update".

// (hit "compile & render" to see Babel's output)

3 · live React (the four reasons, proven)

Click Update Parent State → Parent + all 3 children render (state changed → cascade). Click Update ChildA Only → only ChildA renders (its siblings go gray/skipped). Click Toggle Context → only ChildC (the consumer) renders; Parent is memo-skipped. The gold-check drives all three and asserts the commit log matches.

commits: — · gold: mount(all) → parent(all) → childA(only) → context(only ChildC)

symptom → fix

symptom (what the Profiler shows)	fix	why it works
child renders on every parent update	`React.memo(Child)` + stable props	shallow `Object.is` prop compare skips equal-prop renders
memoized child STILL re-renders	`useCallback` / `useMemo` the props	inline fns / object literals are new refs every render — memo sees "changed"
one context value re-renders the world	split into N contexts, or `useMemo` the value	every consumer re-renders on any Provider value change — narrow the blast radius
root state cascades through a huge tree	move state down to a leaf	only the owner + its descendants re-render — shrink the subtree
don't know why it rendered	Profiler → "Record why each component rendered"	annotates each commit with the exact reason (props/state/context/parent)
"I'll just memo everything"	don't — profile first	memo has a compare cost; only memo what the Profiler proves is wasted