useTransition vs. blocking re-renders — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 The input that lags vs. the one that doesn't</h1>
    <p class="pg-sub">
      Same 8,000-row product list, same keystroke. Type the same thing into both boxes below.
      The left box filters <strong>synchronously on every keystroke</strong> — the classic bug.
      The right box does the exact same work, but runs it the way a transition render does: in small
      chunks that yield back to the browser, abandoned and restarted the moment a newer keystroke
      arrives, so your typing never has to wait for it. (No React on this page — it's plain JS
      modelling what React's scheduler does for a render inside <code>startTransition</code>.)
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="wrap-controls">
        <div class="field">
          <span class="ctl-label">List size (both sides)</span>
          <div class="seg" role="group" aria-label="list size">
            <button type="button" data-size="3000" aria-pressed="false">3,000 rows</button>
            <button type="button" data-size="8000" aria-pressed="true">8,000 rows</button>
            <button type="button" data-size="20000" aria-pressed="false">20,000 rows</button>
          </div>
        </div>
      </div>
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-preset="type">Type "wireless charging pad" for me</button>
        <button class="btn sm" data-preset="clear">Clear both boxes</button>
      </div>
      <p class="hint">
        Bigger list = more filtering work per keystroke. At 20,000 rows the freeze on the left is
        hard to miss — that's real blocking main-thread JS, not a simulated delay.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="compare">
        <div class="side">
          <div class="side-label old-way">❌ Plain useState — every keystroke blocks</div>
          <input type="text" id="naiveInput" placeholder="Type to filter…" autocomplete="off" spellcheck="false" />
          <div class="result-list" id="naiveList"></div>
          <div class="metrics">
            <span class="pill">Matches: <span class="big-count" id="naiveCount">—</span></span>
            <span class="pill" id="naiveTiming">Last render: —</span>
          </div>
        </div>
        <div class="side">
          <div class="side-label new-way">✅ Transition render (simulated) — the list can wait</div>
          <input type="text" id="transInput" placeholder="Type to filter…" autocomplete="off" spellcheck="false" />
          <div class="result-list" id="transList"></div>
          <div class="metrics">
            <span class="pill">Matches: <span class="big-count" id="transCount">—</span></span>
            <span class="pill" id="transStatus">isPending: false</span>
            <span class="pill" id="transInterrupted">Interrupted stale renders: 0</span>
          </div>
        </div>
      </div>

<div class="status" style="margin-top:14px">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Ready — type the same thing in both boxes and compare.</span>
      </div>
    </div>
  </div>

preview

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