Lists and Keys in React

Rendering lists is a very common task in React—users, products, posts, menus, tables, etc. Keys help React identify which items change, are added, or removed.

1. What Are Lists in React?

Lists are created by looping through an array and returning JSX using map().

const numbers = [1, 2, 3, 4];

function NumberList() {
  return (
    <ul>
      {numbers.map(num => (
        <li>{num}</li>
      ))}
    </ul>
  );
}        

2. Using map() Correctly

const users = ["Esa", "Rahim", "Karim"];

{users.map(user => (
  <p>{user}</p>
))}        

• map() returns a new array
• Each iteration renders JSX

3. What Are Keys?

A key is a unique identifier used by React to track list items.

❌ Without keys → inefficient rendering

✅ With keys → better performance

4. Adding Keys to List Items

const users = [
  { id: 1, name: "Esa" },
  { id: 2, name: "Rahim" },
];

{users.map(user => (
  <p key={user.id}>{user.name}</p>
))}        

Keys must be:

• Unique
• Stable
• Not index-based (if possible)

5. Why Not Use Index as Key?

{users.map((user, index) => (
  <p key={index}>{user}</p>
))}        

Causes issues when:

• Items are added or removed
• List is reordered

Use only if data is static.

6. Rendering Complex Lists

function ProductList({ products }) {
  return (
    <div>
      {products.map(product => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>{product.price}</p>
        </div>
      ))}
    </div>
  );
}        

7. Common Use Cases

• Product listings
• User dashboards
• Navigation menus
• Tables & grids
• Blog posts

8. Best Practices

• Always use unique keys
• Prefer database IDs
• Keep JSX clean
• Split into components

Lists and keys are essential for:

• Performance
• Predictable UI updates
• Clean code structure

Every real-world React app uses this pattern extensively.