React best practices, key props in React

In React, key props are used to help React identify which items in a list have changed, been added, or removed. 

When rendering a list of elements, each element should have a unique key prop so that React can efficiently update the list when something changes.

Imagine you have a list of items (like a shopping list) and you want to add, remove, or reorder them.

React uses the key prop to track each item in that list. If something changes, React can quickly figure out which item was affected.

Without key, React would have a harder time figuring out what changed and might re-render the entire list, which is less efficient.

Example:

const fruits = ['Apple', 'Banana', 'Cherry'];

function FruitList() {

  return (

    <ul>

      {fruits.map((fruit, index) => (

        <li key={index}>{fruit}</li> 

      ))}

    </ul>

  );

}

In this example:

The key={index} ensures that each fruit is uniquely identified by its position in the list.

The key should ideally be unique and stable across renders (like a unique ID). This helps React efficiently update only the changed elements rather than re-rendering the entire list.