React List Rendering and Keys

React renders lists by transforming data into elements, commonly with `map()`. A stable `key` gives each sibling item an identity so React can correctly match items between renders.

A list is typically produced by calling JavaScript `map()` on an array and returning a React element for each item. For example, `items.map(item => {item.name})` creates one list element per data item.

The `key` prop is a special React value used during reconciliation; it is not passed to the component as an ordinary prop. Keys should be unique among siblings and should remain stable for the same logical item across renders.

Stable keys let React distinguish an item that moved from an item that was inserted, removed, or replaced. This helps React preserve the appropriate component instances and their state when a list changes.

Using an array index as a key can be acceptable when the list is static and items are never reordered, inserted, or removed. For dynamic lists, an ID from the underlying data is generally safer because indexes can change when the array changes.

Keys only need to be unique within their relevant sibling list; they do not need to be globally unique across the entire application.

Key points

• Use `map()` or another iteration method to turn data into React elements.
• Give each sibling a stable `key` representing the item's identity.
• Prefer a data ID over an array index for dynamic lists.
• Keys help React reconcile list changes and preserve component identity.
• `key` is special to React and is not available through `props.key`.

Interview questions

Why does React require keys when rendering lists?

Keys give React a way to identify corresponding items between renders. When a list changes, React can use those identities to determine which elements were added, removed, or moved. Stable keys also help React preserve component state for the correct item. Without appropriate keys, React may warn and reconciliation can produce inefficient or incorrect identity behavior.

When is using an array index as a key acceptable?

An index can be reasonable when the list is effectively static: items are not reordered, inserted, or removed, and their identity does not depend on their position. It becomes risky when the list can change structurally because the same index may refer to a different item after an update. In a dynamic list, a stable identifier from the data is usually preferable.

Are React keys required to be globally unique?

No. Keys need to be unique among the relevant siblings in a rendered list. The same key value can therefore appear in separate lists without being a problem. What matters is that React can distinguish the siblings being reconciled in that particular list.

Why is a random value such as `Math.random()` a poor key?

A random value generally changes whenever the list is rendered. React then sees different keys and can treat existing elements as entirely new elements rather than matching them to their previous instances. That can cause unnecessary mounting and unmounting and can discard component state. A key should instead be stable for the lifetime of the logical item.