useEffectEvent vs the deps array — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 useEffectEvent vs. the dependency array</h1>
    <p class="pg-sub">
      Same chat room, three real <code>useEffect</code> strategies. Toggle the room and the theme,
      then press <b>Send test notification</b> and watch what each strategy reports.
    </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> Pick the Effect strategy</div>
        <div class="seg" id="strategySeg" role="radiogroup">
          <button class="seg-btn" data-strategy="deps" aria-pressed="true">A) theme in deps</button>
          <button class="seg-btn" data-strategy="stale" aria-pressed="false">B) theme omitted (stale)</button>
          <button class="seg-btn" data-strategy="event" aria-pressed="false">C) useEffectEvent</button>
        </div>
        <p class="strategy-note" id="strategyNote"></p>
      </div>

<div class="panel" style="margin-top:16px">
        <div class="panel-label"><span class="n">2</span> Change the room or the theme</div>
        <div class="btn-row">
          <div class="seg" id="roomSeg" role="radiogroup">
            <button class="seg-btn" data-room="general" aria-pressed="true">#general</button>
            <button class="seg-btn" data-room="random" aria-pressed="false">#random</button>
          </div>
          <label class="toggle" style="margin-left:10px">
            <input type="checkbox" id="themeToggle" /><span class="switch"></span>
            <span id="themeLabel">Light theme</span>
          </label>
        </div>
        <div class="btn-row" style="margin-top:12px">
          <button class="btn primary" id="notifyBtn">🔔 Send test notification</button>
          <button class="btn ghost" id="resetBtn">Reset counters</button>
        </div>
      </div>

<div class="panel" style="margin-top:16px">
        <div class="panel-label"><span class="n">3</span> What actually happened</div>
        <div class="stat-row">
          <div class="stat">
            <span class="big-num" id="reconnectCount">0</span>
            <span class="label">Reconnects since reset</span>
          </div>
          <div class="stat">
            <span class="big-num" id="notifyCount">0</span>
            <span class="label">Notifications sent</span>
          </div>
        </div>
        <div class="log" id="log" aria-live="polite" style="margin-top:12px"></div>
      </div>
    </div>
  </div>

preview

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