React re-render vs remount — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Re-render vs remount: the chat draft, live</h1>
    <p class="pg-sub">
      Switch contacts and watch the draft. With the fix off, the same <code>Chat</code>
      instance survives — draft included. Flip <b>Fix with key</b> and switching
      contacts becomes a real remount: a fresh instance, empty draft, logged below.
    </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> Switch conversation</div>
        <div class="contacts" id="contacts"></div>
        <div class="presets" style="margin-top:14px">
          <label class="toggle">
            <input type="checkbox" id="fixToggle" />
            <span class="switch"></span>
            <span>Fix with <code>key={activeId}</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> The Chat instance</div>
        <div id="chatMount"></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 below comes from a real <code>useEffect</code> mount/cleanup pair inside
          <code>Chat</code> — this is 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.