Lists, Keys & Component Identity

When rendering a collection, each sibling element should have a stable key. Keys are not simply optimization hints: they help React identify which conceptual item corresponds to which previous item.

Use stable identifiers from your data whenever possible. An array index can be acceptable for truly static lists that never reorder, insert, delete, or change identity, but it becomes dangerous for dynamic lists. If a list item contains local state, using an index key can cause that state to appear to move to another item after reordering.

Keys are scoped to the surrounding list. They are not normally available as props.key inside the child component.

Stable keys

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

💡 A database or domain identifier is preferable to the array index when items can be reordered or removed.

Key Takeaways

Keys describe identity among siblings.
Prefer stable domain IDs.
Changing a key intentionally resets component identity and its local state.

Knowledge Check

Why can array-index keys be problematic in a reorderable list?

Lists, Keys & Component Identity

STAY UPDATED WITH BYTES!