What is the role of keys in rendering lists, and what happens if keys are not stable?

What is the role of keys in rendering lists, and what happens if keys are not stable?

• A. Keys are used to set ARIA roles.
• B. Keys help React identify items; unstable keys can cause incorrect item re-use or excessive DOM changes.
• C. Keys are optional and have no effect.
• D. Keys are the same as indexes by default.

Answer: (B)

In React, keys give each item in a list a stable identity across renders, so React can accurately track which items were added, removed, or moved. When keys stay consistent, React can reuse existing DOM nodes and component instances, updating only the parts of the UI that actually changed, which makes rendering efficient and correct. If keys aren’t stable, React may misassociate elements from one render to the next. This can lead to incorrect item re-use—where a component or input keeps state that now belongs to a different item—and unnecessary DOM updates, which can cause glitches or slower updates. A common pitfall is using the array index as a key when the list can reorder; the index changes as items move, breaking the identity of items. Choices about ARIA roles or claiming keys are optional aren’t accurate, and keys aren’t simply the same as indexes by default. The essential idea is that stable, unique keys let React identify items reliably, while unstable keys lead to misalignment and extra work.

In React, keys give each item in a list a stable identity across renders, so React can accurately track which items were added, removed, or moved. When keys stay consistent, React can reuse existing DOM nodes and component instances, updating only the parts of the UI that actually changed, which makes rendering efficient and correct.

If keys aren’t stable, React may misassociate elements from one render to the next. This can lead to incorrect item re-use—where a component or input keeps state that now belongs to a different item—and unnecessary DOM updates, which can cause glitches or slower updates. A common pitfall is using the array index as a key when the list can reorder; the index changes as items move, breaking the identity of items.

Choices about ARIA roles or claiming keys are optional aren’t accurate, and keys aren’t simply the same as indexes by default. The essential idea is that stable, unique keys let React identify items reliably, while unstable keys lead to misalignment and extra work.