When rendering a list what is a key and what is its purpose?

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.

javascript

1
The 'key' prop is used to assign a unique identity to each element in a list of elements. React uses the 'key' prop to efficiently update and re-render components in a list when the underlying data changes.
2
It helps React identify which items were added, removed, or re-ordered, leading to better performance and fewer re-renders.
3
Most often you would use IDs from your data as keys. When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort. It is not recommend to use indexes for keys if the items can reorder, as that would be slow.

Difficulty: 3/10

Topics: list rendering, keys, reconciliation

Scenario Questions

0-2 years experience

1
How would you add a key when mapping over an array of user objects to render a list of names?
2
What happens in the UI if you forget to include a key prop on list items rendered with .map?

2-5 years experience

1
You added a new item to the top of a list and now the displayed details are mismatched. How would you debug and fix the issue?
2
Why can using the array index as a key cause bugs when items are reordered or filtered?

5-8 years experience

1
When rendering thousands of rows with dynamic data, what key strategy would you choose to minimize re‑renders and work well with virtualization libraries?
2
If a legacy component uses non‑unique keys that are causing memory leaks, how would you refactor it while keeping the existing API stable?

8+ years experience

1
Your team is migrating a large monolith to a micro‑frontend architecture. How would you establish a consistent key convention across teams to avoid collisions and ensure stable reconciliation?
2
Design guidelines for a shared UI component library that will be used by multiple products: what rules would you set for key usage to prevent subtle bugs in future releases?

Follow-up Questions

❓Can you explain how React uses keys during the diffing process?
❓What are the trade‑offs of using array indexes as keys versus stable IDs?
❓How would you verify that your key implementation is working correctly?