sort() vs toSorted() — watch the reference

<div class="wrap">
    <h1>🎮 sort() vs toSorted(): watch the reference</h1>
    <p class="sub">
      Classic methods (<code>sort</code>, <code>reverse</code>, <code>splice</code>) mutate the array and hand back the
      <strong>same</strong> reference — so React compares by identity, sees no change, and <strong>skips the re-render</strong>.
      ES2023's <code>toSorted</code>, <code>toReversed</code>, <code>toSpliced</code>, <code>with</code> return a
      <strong>new</strong> array. Click one and watch <code>result === original</code> flip.
    </p>

<div class="panel">
      <h2>1 · Run a method on the array</h2>
      <div class="cols">
        <div class="col">
          <div class="colhead bad">⚠️ Mutating — returns the same array</div>
          <button class="op bad" data-op="sort">sort((a,b) =&gt; b.priority - a.priority)</button>
          <button class="op bad" data-op="reverse">reverse()</button>
          <button class="op bad" data-op="splice">splice(1, 1)</button>
        </div>
        <div class="col">
          <div class="colhead good">✓ Immutable — returns a new array</div>
          <button class="op good" data-op="toSorted">toSorted((a,b) =&gt; b.priority - a.priority)</button>
          <button class="op good" data-op="toReversed">toReversed()</button>
          <button class="op good" data-op="toSpliced">toSpliced(1, 1)</button>
          <div class="withrow">
            <label>with(
              <select id="withIdx" aria-label="index to replace"></select>,
              priority
              <input id="withVal" type="number" min="1" max="9" value="9" aria-label="new priority" />
              )</label>
            <button class="op good" data-op="with">Apply with()</button>
          </div>
        </div>
      </div>
      <div class="resetrow"><button id="reset" class="ghost">↺ Reset array</button></div>
    </div>

<div class="panel">
      <h2>2 · What just happened</h2>
      <div class="empty" id="empty">
        Click a method above. You'll see the array it returned, whether the original was
        mutated, whether <code style="color:var(--accent)">result === original</code>, and — the whole point —
        whether React would re-render.
      </div>

<div class="arrays">
          <div class="arrcard">
            <div class="arrhead"><span>Original array</span><span class="badge" id="origBadge">array</span></div>
            <ul class="chips" id="origList"></ul>
          </div>
          <div class="rel" id="rel"><span class="op-sym" id="relSym">===</span><span class="op-cap" id="relCap">same array</span></div>
          <div class="arrcard">
            <div class="arrhead"><span>Method returned</span><span class="badge" id="resBadge">array</span></div>
            <ul class="chips" id="resList"></ul>
          </div>
        </div>

<div class="facts">
          <div class="fact"><span>result === original</span><b id="factRef"></b></div>
          <div class="fact"><span>original mutated?</span><b id="factMut"></b></div>
        </div>

preview

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