Keys

Why Keys Matter

Keys help React identify which items have changed, been added, or removed.

How React Uses Keys

When a list is rendered, React uses keys to:

1. Identify which items are the same across renders
2. Track item identity for efficient updates
3. Preserve state of components that haven't changed

Without Keys

// Bad: No keys
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li>{todo.text}</li> // Warning: Each child needs a key
      ))}
    </ul>
  );
}

With Keys

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

Performance Impact

Without proper keys:

• React may re-render all items unnecessarily
• Component state may be lost or mixed up
• Animations and transitions may break

Choosing Keys

Best Options

1. Unique IDs from data (preferred)

{users.map((user) => (
  <UserCard key={user.id} user={user} />
))}

2. Stable unique values

{users.map((user) => (
  <UserCard key={user.email} user={user} />
))}

3. Index as last resort

// Only if list is static and won't reorder
{items.map((item, index) => (
  <li key={index}>{item.name}</li>
))}

When Index is OK

• List is static (no additions/removals)
• List won't be reordered
• Item has no state or lifecycle methods
• Item won't be filtered or sorted

Generating Keys

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

// Generated (less ideal)
{items.map((item, index) => (
  <li key={`item-${index}`}>{item.name}</li>
))}

// From unique property
{products.map((product) => (
  <li key={product.sku}>{product.name}</li>
))}

Key Anti-patterns

Don't Use Math.random()

// Bad: Random keys on every render
{items.map((item) => (
  <li key={Math.random()}>{item.name}</li>
))}

Problems:

• New key every render = full re-render
• State is never preserved
• Performance is terrible

Don't Use Non-Unique Values

// Bad: Duplicate keys
{users.map((user) => (
  <li key={user.name}>{user.name}</li>
))}
// What if two users have the same name?

Don't Use Complex Objects

// Bad: Object reference changes every render
{items.map((item) => (
  <li key={{ id: item.id }}>{item.name}</li>
))}

Key Takeaways

// Good
{items.map((item) => (
  <li key={item.id}>{item.name}</li>
))}

// Acceptable (if list is static)
{items.map((item, index) => (
  <li key={index}>{item.name}</li>
))}

// Bad
{items.map((item) => (
  <li key={Math.random()}>{item.name}</li>
))}