Lists and Keys in React

Render collections efficiently and avoid UI bugs by using stable keys for list items.

Rendering a list

tsx

const todos = [
  { id: 't1', title: 'Read docs' },
  { id: 't2', title: 'Build app' },
];

return (
  <ul>
    {todos.map(todo => (
      <li key={todo.id}>{todo.title}</li>
    ))}
  </ul>
);

Why keys matter

Keys help React identify which items changed, moved, or were removed.

Key best practices

Use stable unique IDs from backend/data model
Avoid random keys
Avoid array index keys when order can change

Extract list items into components

tsx

function TodoItem({ title }: { title: string }) {
  return <li>{title}</li>;
}

Next, we will cover component lifecycle in modern React.