How does React’s diffing algorithm work?

React’s diffing algorithm compares two Virtual DOM trees to identify changes and update only the affected nodes.

⚙️ Key Rules

1. Element Type Check — If elements differ in type, React replaces the old node.
2. Props Check — If same type, React only updates changed props.
3. Keys for Lists — Help React match items efficiently in arrays.

🧩 Example

<ul>
  {list.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

✅ Unique keys prevent unnecessary re-renders when list order changes.