Read

Position-based diffing breaks on reordered lists: every node looks "different" and the reconciler tears down and rebuilds the DOM, losing focus, scroll, and animation state.

The fix is keys — stable IDs the framework uses to pair old and new nodes by identity instead of by position. With keys, a reorder becomes a series of MOVE operations; an insert at index 0 inserts one node instead of rebuilding the whole list.

In this exercise you implement a simplified keyed reconciler. Given an OLD list of keys and a NEW list of keys:

• Keys present in both -> KEEP <key> (in NEW order).
• Keys only in NEW -> INSERT <key> (at the position they appear in NEW).
• Keys only in OLD -> REMOVE <key> (appended after, in OLD order).

This is the same shape as React/Vue keyed diffing, minus the LIS optimization for minimizing moves.