Comparison
List keyvsReconciliation
List key
you delete the second row and the text you had typed into the third row is suddenly in the second.
The stable identifier that tells reconciliation which item in a list is which across renders. Without it, or with the array index used as one, the framework matches items by position, so inserting or removing anything makes state, focus and animations attach to the wrong rows. The fix is always the same and always cheap: use the identifier the data already has.
Full entry →Reconciliation
the component's state survived the re-render because the framework decided it was the same element as before.
The algorithm that matches the new tree against the previous one to decide what to update, what to leave alone, and what to unmount. Its identity rules are what determine whether a component keeps its state or is thrown away and rebuilt, which is why moving a component to a different position in the tree can silently reset it. Understanding those rules is the difference between debugging a state bug and blaming the framework for one.
Full entry →