Rendering lists

Lists are rendered by mapping data to elements inside JSX. Each sibling needs a stable `key` so React can match items across renders. Handle empty collections with explicit empty states instead of silent blanks.

Sorting and filtering should usually happen before render — keep render a pure function of props and state. Avoid index keys when items can be reordered, inserted, or deleted; use durable record ids instead.

					{items.map((item) => (
  <Row key={item.id} item={item} />
))}
				

Pagination or virtualization may be needed for very large lists, but the key rule remains: identity must reflect the data row, not its position alone.

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:

• Map data to elements with stable keys.
• Show empty and loading states explicitly.
• Derive sorted or filtered arrays before JSX.