fw-02 step 02 — Build the unkeyed version, then fix it

Goal

Keys are meaningless until you have seen what they fix. Do not skip the broken version.

Tasks

  1. Implement children reconciliation matching by index only. Run stage 4; watch both keyed tests fail.
  2. Build the human demonstration: a list of text inputs with values typed in, then reorder. Watch state follow position rather than identity.
  3. Now add keys. Match by key; move existing nodes rather than recreating them. Confirm node identity is preserved via the fake DOM's object identity.
  4. Try key={index} on the same reorder. Show the bug returns. Explain why it is no key with extra steps.
  5. Write the ambiguity argument in your own words: given [A,B,C] → [B,C], why can no algorithm decide what happened?

Done when

  • Unkeyed failure reproduced and demonstrated with real UI state
  • Stage 4 green with real node moves
  • The index-as-key failure reproduced
  • Notebook entry: why identity must be author-supplied