⚡ Understanding React Keys and Why They Matter

When rendering lists in React, you must give each element a unique key. Keys help React identify which items changed, added, or removed.

🎯 Example without key (⚠️ bad practice):

{items.map(item => (
  <li>{item}</li>
))}

🎯 Example with key (✅ good practice):

{items.map((item, index) => (
  <li key={index}>{item}</li>
))}

📌 Best Practices:
• Use a unique ID from data as key (not array index, unless no stable ID).
• Keys improve performance by avoiding unnecessary re-renders.
• Wrong or missing keys can cause UI bugs in lists.

✨ Think of keys as React’s way of tracking elements between renders!