React <Activity> — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 &lt;Activity&gt;: hidden, not gone</h1>
    <p class="pg-sub">
      Pick a hide method, then toggle visibility. Watch the counter, the draft, and the
      two badges — <code>renders</code> and <code>effect mounts</code> — to see exactly
      what each method preserves and what it destroys.
    </p>

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

<div id="app" hidden>
      <div class="panel">
        <div class="panel-label"><span class="n">1</span> Hide method</div>
        <div class="seg" id="modeSeg" role="group" aria-label="Hide method"></div>
        <div class="presets" style="margin-top:14px">
          <button class="btn primary sm" id="toggleBtn">Hide panel</button>
          <button class="btn ghost sm" id="bumpBtn">Bump shared prop</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> The ReportPanel instance</div>
        <div id="panelMount"></div>
        <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> mount/cleanup and render count
          inside <code>ReportPanel</code> — React's own reconciler, observed, not narrated.
        </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.

React &lt;Activity&gt; — interactive playground

React <Activity> — interactive playground