React derived state — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Derived state, live</h1>
    <p class="pg-sub">
      Click a filter or "Complete all." In <b>Buggy</b> mode the filtered list is its own
      <code>useState</code>, kept in sync by a real <code>useEffect</code> — watch the render
      log count two real commits for one click. Flip to <b>Fixed</b> and the same click
      produces exactly one, because the list is just a formula now.
    </p>

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

<div id="app" hidden>
      <div class="panel">
        <div class="panel-label"><span class="n">1</span> Mode</div>
        <label class="toggle">
          <input type="checkbox" id="buggyToggle" checked />
          <span class="switch"></span>
          <span>Buggy: sync <code>visibleTodos</code> with a <code>useEffect</code></span>
        </label>
        <p class="hint" id="modeHint" style="margin-top:8px"></p>

<div class="seg" id="filterSeg" style="margin-top:14px">
          <button data-filter="all">All</button>
          <button data-filter="active">Active</button>
          <button data-filter="done">Done</button>
        </div>
        <div class="presets" style="margin-top:12px">
          <button class="btn ghost sm" id="completeAllBtn">Complete all (bulk update)</button>
          <button class="btn ghost sm" id="resetBtn">Reset demo</button>
        </div>
      </div>

<div class="panel" style="margin-top:16px">
        <div class="panel-label">
          <span class="n">2</span> Todo list
          <span class="render-badge" id="renderBadge">renders: 0</span>
        </div>
        <div id="list"></div>
        <div class="stale-banner" id="staleBanner">
          ⚠️ showing results for the <em>previous</em> filter — the sync Effect hasn't caught up yet
        </div>
      </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> with no dependency array, which
          React runs after <em>every</em> commit — this counts real renders, not a description of them.
        </p>
        <div class="log" id="log" aria-live="polite"></div>
      </div>
    </div>
  </div>

preview

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