Keys

Keys tell React which item in a collection corresponds to which instance among siblings. They are not passed as props to the component — React consumes them internally. Stable database ids beat array indices when order changes.

Wrong keys cause state to jump between rows — typed text appearing on the wrong input after sort is the classic bug. Generating random keys on each render defeats reconciliation and forces remounts every time.

					// risky after reorder
items.map((item, index) => <Row key={index} />);
				

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

• Keys unique among siblings, stable across renders.
• Prefer record ids over index when list mutates.
• Never use Math.random() per render as key.