🔑 Keys and Reconciliation

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

Why Keys Matter

// ❌ Without keys - React re-renders all items
function List() {
  const [items, setItems] = React.useState(["A", "B", "C"]);

  return (
    <ul>
      {items.map((item, i) => (
        <li key={i}>{item}</li>  // Using index as key (bad)
      ))}
    </ul>
  );
}

// ✅ With stable keys - React knows which item changed
function List() {
  const [items, setItems] = React.useState([
    { id: 1, text: "A" },
    { id: 2, text: "B" },
    { id: 3, text: "C" }
  ]);

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>  // Stable key
      ))}
    </ul>
  );
}

What Reconciliation Does

React reconciles (compares) old and new lists:

• **With stable keys**: React matches items by key, only updates changed properties

• **Without keys or index keys**: React compares by position, updating all items

Key Properties

Good keys are:

• **Unique** within the list

• **Stable** (don't change between renders)

• **Predictable** (same data = same key)

Component State with Lists

function TextInputList() {
  const [inputs, setInputs] = React.useState([
    { id: 1, value: "" },
    { id: 2, value: "" }
  ]);

  const handleChange = (id, value) => {
    setInputs(inputs.map(input =>
      input.id === id ? { ...input, value } : input
    ));
  };

  return (
    <div>
      {inputs.map(input => (
        <input
          key={input.id}
          value={input.value}
          onChange={(e) => handleChange(input.id, e.target.value)}
        />
      ))}
    </div>
  );
}

Reconciliation Performance

✅ Key Takeaways

• Keys help React identify which items changed

• Use **stable, unique IDs** as keys, not indexes

• Keys maintain **component state** across re-renders

• Good keys improve **performance** significantly