跳到主要内容

React Key Prop

Key = React's identifier for list items

What is the Key Prop?​

"Unique identifier for list items"

The key prop helps React identify which items have changed, been added, or removed in lists.

"The key prop is a special attribute that helps React efficiently update lists by identifying which items have changed, been added, or removed."

Why Keys Are Important​

Efficient reconciliation

  • Helps React identify items
  • Enables efficient updates
  • Prevents unnecessary re-renders
  • Maintains component state correctly

"Keys enable React's reconciliation algorithm to efficiently update lists by tracking which items correspond to which components."

Basic Usage​

key={uniqueId} on list items

{
  items.map((item) => <div key={item.id}>{item.name}</div>);
}

"Keys are added to elements in lists, typically using a unique ID from the data."

Key Requirements​

Unique · Stable · Present

  • Unique: No duplicates in same list
  • Stable: Don't change between renders
  • Present: Always provide a key

"Keys must be unique within the list, stable across renders, and always present."

Using Index as Key​

Index = bad if list can reorder

// ❌ Bad if items can reorder
{
  items.map((item, index) => <div key={index}>{item.name}</div>);
}

// ✅ Good - use unique ID
{
  items.map((item) => <div key={item.id}>{item.name}</div>);
}

"Using index as key is acceptable only if the list is static and never reorders, filters, or sorts."

Problems with Index Keys​

Reordering breaks component state

When using index:

  • Reordering items causes wrong components to update
  • Component state gets mixed up
  • Performance issues

"Index keys cause problems when lists reorder - React updates the wrong components and mixes up state."

Key Best Practices​

Use stable, unique IDs

✅ Good:

  • Database IDs
  • UUIDs
  • Stable unique identifiers

❌ Bad:

  • Array index (if list changes)
  • Random values (not stable)
  • Math.random()

"Use stable, unique identifiers like database IDs or UUIDs for keys, not array indices or random values."

Keys and Component State​

Key change = new component instance

When key changes:

  • React unmounts old component
  • Mounts new component
  • State is reset

"Changing a key causes React to treat it as a new component, unmounting the old one and resetting state."

9️⃣ Keys in Nested Lists​

Keys only needed on direct children

{
  items.map((item) => (
    <div key={item.id}>
      {item.tags.map((tag) => (
        <span key={tag.id}>{tag.name}</span>
      ))}
    </div>
  ));
}

"Keys are only needed on elements directly returned from map, not on nested elements."

Common Mistakes​

❌ Using index when list can change ❌ Using random values ❌ Missing keys ❌ Duplicate keys ❌ Using keys on wrong elements

"The key prop helps React efficiently update lists by identifying which items changed. Keys must be unique, stable, and present. Use stable IDs like database IDs, not array indices (unless list never changes). Index keys cause problems when lists reorder. Changing a key unmounts and remounts the component."

🧠 Ultra-Short Cheat Sheet​

Unique identifier for lists
Must be unique, stable, present
Use IDs, not index (if list changes)
Key change = new component
Only on direct map children