Catch the tear — useSyncExternalStore playground

<div class="pg">
    <h1 class="pg-title">🧵 Catch the tear</h1>
    <p class="pg-sub">
      One shared value, two ways of reading it. Turn on "busy render" to simulate React
      pausing mid-render, then bump the value a few times while it's paused. The
      <code>useState</code>-style panel can freeze and show an old number; the
      <code>useSyncExternalStore</code>-style panel always re-checks right before it paints.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row">
        <button class="btn primary" id="bump">+1 to the shared store</button>
        <button class="btn" id="bump5">+5 rapidly</button>
        <button class="btn ghost" id="reset">Reset</button>
        <label class="toggle" style="margin-left:6px">
          <input type="checkbox" id="busy" /><span class="switch"></span>
          <span>simulate busy render (900ms pause)</span>
        </label>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="online">Worked example: online/offline flip</button>
      </div>
      <p class="hint">
        The store value stands in for something like <code>navigator.onLine</code> or
        <code>window.innerWidth</code> — a fact that lives outside React and can change
        at any moment, including mid-render.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Two readers, one store</div>
      <div class="panels">
        <div class="reader" id="naive">
          <h3>useState + useEffect</h3>
          <div class="value" id="naiveValue">0</div>
          <small>updates from a subscription callback, on its own schedule</small>
        </div>
        <div class="reader" id="sync">
          <h3>useSyncExternalStore</h3>
          <div class="value" id="syncValue">0</div>
          <small>re-reads the store directly, every time it paints</small>
        </div>
      </div>
      <div class="status" id="status" style="margin-top:14px">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Ready — bump the store, with or without a busy render.</span>
      </div>
      <p class="hint" id="caption">
        Tears caught so far: <span class="tearcount" id="tearCount">0</span> —
        a tear is a moment the two panels showed different numbers for the same store.
      </p>
    </div>
  </div>

preview

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