easyFrontend

What is the purpose of the `key` prop when rendering lists in React?

Q: What is the purpose of the `key` prop when rendering lists in React?

**Core concept (TL;DR).** key gives each item in a list a **stable identity** so React can match elements between renders during reconciliation. With correct keys, React updates/moves only what changed instead of re-creating the whole list. Keys must be **unique among siblings** and **stable** — use a real id, not the array index. Keys let React match items across renders stable id key ✓

890 views

Understand the problem

This covers a critical concept for efficient list rendering and avoiding bugs.

listskeysperformancereconciliation

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Stable keys preserve per-row state

import { useState } from "react";

export default function App() {
  const [items, setItems] = useState([
    { id: "a", name: "Ada" },
    { id: "b", name: "Grace" },
    { id: "c", name: "Lin" },
  ]);
  const shuffle = () => setItems((xs) => [...xs].reverse());

  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <button onClick={shuffle}>Reverse</button>
      <ul>
        {items.map((it) => (
          <li key={it.id}>                 {/* stable id, not index */}
            {it.name} <input placeholder="type then reverse" />
          </li>
        ))}
      </ul>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are React Developer Tools and how do you use them?

Explain the concept of 'lifting state up' in React.