~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/react/8react-lists-keys

# Lists and Keys

Use `.map()` to render arrays of data. Keys help React identify which items changed, added, or removed.

## Rendering a List

```jsx
const fruits = ["Apple", "Banana", "Cherry"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}
```

Every item needs a `key` prop.

## Why Keys Matter

React uses keys to track items during re-renders. Without keys, or with bad keys, React can't efficiently update the list.

```jsx
// ❌ Without keys — React warns you
{fruits.map((fruit) => <li>{fruit}</li>)}

// ✅ With stable keys
{fruits.map((fruit) => <li key={fruit}>{fruit}</li>)}
```

Keys enable React to reuse DOM nodes correctly when items reorder or change.

## What Makes a Good Key

Use a **stable, unique identifier**:

```jsx
const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
];

{users.map((user) => (
  <li key={user.id}>{user.name}</li>
))}
```

Good keys: database IDs, UUIDs, unique slugs.

## Index as Key — Anti-Pattern

Using array index as a key causes bugs when the list reorders:

```jsx
// ❌ Bad if list can reorder, add, or remove
{items.map((item, index) => (
  <li key={index}>{item.name}</li>
))}
```

Only use index as key if the list is **static and never reorders**.

## Key Rules

- Keys must be **unique among siblings**, not globally
- Keys must be **stable** — don't generate them with `Math.random()`
- Keys can be strings or numbers
- Don't use array index if the list can change

## Mapping to Components

Pass data as props for cleaner list rendering:

```jsx
function UserCard({ user }) {
  return <div>{user.name}</div>;
}

function UserList({ users }) {
  return users.map((user) => (
    <UserCard key={user.id} user={user} />
  ));
}
```

## Best Practices

1. **Use unique IDs** — Database IDs or UUIDs as keys
2. **Avoid index keys** — If list items can reorder or change
3. **Keep keys stable** — Never use `Date.now()` or `Math.random()`
4. **Extract list items to components** — Cleaner and more reusable

## Common Mistakes

1. **Using index as key** — Causes bugs with reordering
2. **Using random values** — Keys change every render, breaking reconciliation
3. **Using non-unique keys** — Duplicate keys cause rendering issues
4. **Forgetting keys entirely** — React warns and may behave unpredictably

No changes yet

cancel