Q98- What is the purpose of key in React lists?

In React, key is a special prop used to identify elements in a list uniquely. It helps React track which items have changed, been added, or removed during re-renders.

---

Why Keys are Important

1. Efficient Re-rendering
   • React uses keys to match elements between renders.
   • Without keys, React may re-render unnecessarily or reuse wrong DOM elements.
2. Preserve Component State
   • When a list item is removed or reordered, keys help React keep the correct state of components.
3. Performance Optimization
   • Prevents React from re-rendering the entire list, only updating the changed items.

---

Example

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

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

• Bad practice: using index as key (can cause bugs when list changes)

<li key={index}>{fruit}</li> // Avoid if list order changes

• Good practice: use unique ID or unique property from data

---

⚡ In short:

key helps React identify items in lists uniquely, improving performance, preserving component state, and ensuring correct updates when the list changes.