React Compiler & memoization — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 React Compiler & memoization, live</h1>
    <p class="pg-sub">
      Type in the search box. With memoization off, every card re-renders on every keystroke —
      watch the log. Flip <b>Apply manual memoization</b> and the same keystrokes stop touching
      the cards at all. This is the exact behavior React Compiler gives you automatically, from
      the plain unmemoized code, with no toggle to flip yourself.
    </p>

<div class="banner info show" id="boot">Loading the real React 19.2.8 runtime from the CDN…</div>

<div id="app" hidden>
      <div class="panel">
        <div class="panel-label"><span class="n">1</span> Search (this is the state that re-renders Dashboard)</div>
        <input id="query" class="draft-input" placeholder="Type anything…" style="width:100%; box-sizing:border-box; padding:10px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--bg); color:inherit; font:inherit;" />
        <div class="presets" style="margin-top:14px">
          <label class="toggle">
            <input type="checkbox" id="memoToggle" />
            <span class="switch"></span>
            <span>Apply manual memoization (<code>memo</code> + <code>useMemo</code> + <code>useCallback</code>)</span>
          </label>
          <button class="btn ghost sm" id="resetBtn" style="margin-left:10px">Reset demo</button>
        </div>
      </div>

<div class="panel" style="margin-top:16px">
        <div class="panel-label"><span class="n">2</span> Team roster</div>
        <ul class="roster" id="roster"></ul>
        <p class="hint" id="verdictHint" style="margin-top:12px"></p>
      </div>

<div class="panel" style="margin-top:16px">
        <div class="panel-label"><span class="n">3</span> What React actually did</div>
        <p class="hint" style="margin-top:0">
          Every line comes from a real <code>useEffect</code> that fires after each card commits —
          this is React's own reconciler, observed, not narrated.
        </p>
        <div class="log" id="log" aria-live="polite"></div>
      </div>

<div class="panel" style="margin-top:16px">
        <div class="panel-label"><span class="n">4</span> Model: what React Compiler would generate</div>
        <p class="hint" style="margin-top:0">
          <b>This panel does not execute.</b> React Compiler is a build-time Babel transform — it
          cannot run inside a static HTML page. It shows what the compiler does with the plain,
          unmemoized code from section 1 above: it produces the same "cards don't re-render"
          result you see with the toggle <em>on</em>, without you writing <code>memo</code>,
          <code>useMemo</code>, or <code>useCallback</code> anywhere.
        </p>
        <div class="compare">
          <div class="col">
            <h4>You write</h4>
            <pre class="code"><code>function TeamRoster({ members, onInvite }) {
  const sorted = sortByActivity(members);
  return (
    &lt;ul&gt;
      {sorted.map((m) =&gt; (
        &lt;MemberCard
          key={m.id}
          member={m}
          onInvite={() =&gt; onInvite(m.id)}
        /&gt;
      ))}
    &lt;/ul&gt;
  );
}</code></pre>
          </div>
          <div class="col">
            <h4>Compiler analyzes &amp; memoizes</h4>
            <pre class="code"><code>// Illustrative — the real output is generated
// HIR, not source you'd hand-write or read.
function TeamRoster({ members, onInvite }) {
  const sorted = $[0] !== members
    ? sortByActivity(members)
    : $[1];
  // ...each &lt;MemberCard&gt; element is cached
  // the same way, keyed on its own inputs.
}</code></pre>
          </div>
        </div>
      </div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.