⚡ 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!