Why do keys matter in React, and how do they improve performance?

Keys give React a stable identity for list elements, allowing the reconciliation algorithm to correctly match elements between renders. This minimizes DOM updates, preserves component state, and improves performance, especially in dynamic lists.

What problem do keys solve?
React uses a diffing (reconciliation) algorithm to compare:
Previous Virtual DOM
Next Virtual DOM

Without keys, React:
Compares elements by index
May assume elements changed even when they didn't

With keys, React:
Tracks elements by stable identity
Reuses existing DOM nodes when possible

How do keys improve performance?

1. Prevent unnecessary DOM updates
   DOM operations are expensive
   Keys allow DOM reuse

2. Preserve component state
   Without keys → input loses focus/value
   With keys → state preserved

3 . Enable efficient recording
Drag & drop lists
Sorting
Filtering

React moves nodes instead of destroying & recreating them