🗝️ React Keys — Why They Matter in Lists

When rendering lists in React using map(), each item needs a unique key. Keys help React identify which items changed, added, or removed.

🎯 Why use keys?
• Improve rendering performance
• Prevent unnecessary re-renders
• Keep UI stable during updates

🔧 Example:

const fruits = ["Apple", "Banana", "Orange"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

📌 Key points:
• Keys should be unique among siblings
• Avoid using index as key (except for static lists)
• Better to use a unique ID from data

Using proper keys makes your React lists efficient and predictable.