Code Quiz

Keys and Reconciliation Bug

A list with editable inputs uses array indexes as keys, breaking React's reconciliation when items are removed.

Codejavascript

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 'a', text: 'Buy milk' },
    { id: 'b', text: 'Walk dog' },
    { id: 'c', text: 'Write code' },
  ]);

  const remove = (id) =>
    setTodos((prev) => prev.filter((t) => t.id !== id));

  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>
          <input defaultValue={todo.text} />
          <button onClick={() => remove(todo.id)}>x</button>
        </li>
      ))}
    </ul>
  );
}

What is the bug that causes edited input values to jump to the wrong row after deleting an item?

← PreviousReconciliation and Render Performance Next →Keys and Reconciliation Behavior