juniorReact

What is the purpose of keys in React lists and what makes a good key?

Updated Apr 23, 2026

Short answer

In React, keys are special attributes used in lists to help React identify which items have changed, been added, or removed.

A good key is a stable, unique, and predictable identifier for each list item, such as an ID from a database.

Deep explanation

Why React needs keys

When rendering lists, React needs to efficiently update the UI when data changes.

Without keys, React would:

  • Re-render entire lists unnecessarily
  • Lose track of which item is which
  • Cause performance issues and UI bugs

Keys help React perform reconciliation efficiently by matching elements between renders.

---

Example of a list with keys

JSX
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

Here:…

Unlock with a Pro subscription to view this section.

View pricing

Real-world example

No real-world example available yet.

Unlock with a Pro subscription to view this section.

Upgrade to Pro

Common mistakes

No common mistakes listed yet.

Unlock with a Pro subscription to view this section.

Upgrade to Pro

Follow-up questions

No follow-up questions available yet.

Unlock with a Pro subscription to view this section.

Upgrade to Pro

More React interview questions

View all →