What is the key prop and why is it critical in lists?

The key prop is React's mechanism to identify list items across renders. Without stable keys, React can't efficiently reconcile list changes.

// ❌ Using index as key — problematic when list reorders or items are inserted
{items.map((item, index) => (
  
))}

// ✅ Use a stable unique ID from the data
{items.map(item => (
  
))}

Why index keys fail:

// Initial:  [A(key=0), B(key=1), C(key=2)]
// Delete A: [B(key=0), C(key=1)]
// React sees key=0 CHANGED (not deleted) → updates B in place
// Key=2 REMOVED → destroys C
// Result: input state, focus, animations on wrong elements

When index keys are safe:

• The list never reorders
• Items are never inserted or deleted from the middle
• Items have no state (text-only renders)