1 min lesson
Reconciliation, keys and unstable references
Take this situation: "A memo'd child re-renders on every parent render even though its visible props look unchanged. What is the most likely cause?" Lead with your decision, then add the reason.
Step 1 of 2
Reconciliation, keys and unstable referenceswhy your component re-rendered
React re-renders a component when its state changes, its parent re-renders or its context value changes. The trap is passing a fresh object, array or function on every render: {} and () => {} are new identities each time, so a memo'd child sees changed props and re-renders anyway.
Keys tell React which list items are the same across renders. A wrong key - index in a reorderable list - makes React reuse the wrong DOM node, so input focus jumps and animations snap. Use a stable id from the data, never the array index when the list can reorder, insert or delete.
// Wrong: index as key in an editable, reorderable list {rows.map((row, i) => <Row key={i} value={row.value} />)} // Right: stable identity from the data model {rows.map((row) => <Row key={row.id} value={row.value} />)}