Reconciliation, live

Mutate the new tree and watch React diff it against what's mounted — classifying every node and emitting only the necessary DOM operations. Then prove why stable keys win, quantitatively.

Mutate the new tree:

Old and new trees are identical — no work to commit. Mutate the new tree to trigger a diff.

Old tree what is mounted now
    New tree (your sankalpa) what you declared
      matched · unchanged props updated newly mounted unmounted
      Diff summary
      Committed DOM operations what React actually touches

        The key demo — reorder a list, with and without stable keys

        Same list, same reorder. The only difference is the key. Watch the operation count — and notice that with index keys the node identity stays in the slot, so any state (focus, selection) follows the wrong item.

          key={index} — no reorder yet
          key={item.id} — no reorder yet