Interview · Reconciliation
Key prop
key is not just for lists
The key prop tells React which DOM node corresponds to which element between renders. When key changes, React unmounts the old component and mounts a fresh one — which lets you reset state intentionally.
The identity mechanism
React compares the new tree against the previous one by type and position. If an element has the same key as before, React reuses it (updates). If the key changes, React unmounts it and mounts from scratch — including its internal state and effects.
key as intentional reset
Passing a key that changes with an external ID is the idiomatic way to reset a component without adding reset logic inside it. When the user switches items, the key changes and React mounts a clean instance automatically.
Common pitfalls
- 01Using the array index as a key is an anti-pattern when the list can be reordered — React will reuse the wrong node.
- 02key is not a readable prop — you can't access it with props.key. If you need the value, pass it as a separate prop.
- 03key must be unique among siblings, not globally. The same value can appear in separate lists without issue.
Was this helpful?
Sign in to give feedback