✅ What are Lists in React?

In React, a list is a way to render multiple UI elements from an array of data. Instead of writing repetitive JSX, you can iterate over an array and dynamically create elements or components using JavaScript’s map() method. This is commonly used for displaying users, products, menu items, todos, and more. Lists make your UI data-driven, scalable, and easy to maintain.

🚀 Basic Syntax for Rendering Lists

React uses the map() function to transform an array into JSX elements.

export default function NamesList() {
  const names = ["Asha", "Ravi", "Imran"];

  return (
    <ul>
      {names.map(name => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

Here, each item in the names array becomes an <li> element. The key prop is required and plays a critical role in how React updates the UI.

🧠 What are Keys and Why Do We Need Them?

A key is a special attribute that helps React identify which list items have changed, been added, or removed between renders. Keys allow React’s reconciliation algorithm to work efficiently and prevent unnecessary re-renders or UI bugs.

Key benefits include uniquely identifying items across renders, improving performance by minimizing DOM updates, and avoiding issues like input values moving to the wrong item.

🔧 Example: Using Stable Keys

export default function TodoList() {
  const todos = [
    { id: 101, text: "Buy milk" },
    { id: 102, text: "Call mom" },
    { id: 103, text: "Pay bill" },
  ];

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

Using a unique id from the data source is the best practice because it remains stable even if the list changes.

🔄 Dynamic Lists (Add / Remove Items)

Lists often change over time. React handles this smoothly when keys are used correctly.

import { useState } from "react";

export default function ShoppingList() {
  const [items, setItems] = useState([
    { id: "a1", name: "Rice" },
    { id: "b2", name: "Sugar" },
  ]);

  function addItem() {
    const id = crypto.randomUUID();
    setItems(curr => [...curr, { id, name: "New Item" }]);
  }

  function removeItem(id) {
    setItems(curr => curr.filter(i => i.id !== id));
  }

  return (
    <div>
      <button onClick={addItem}>Add</button>
      <ul>
        {items.map(i => (
          <li key={i.id}>
            {i.name}
            <button onClick={() => removeItem(i.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

React uses the keys to correctly add or remove only the affected items from the DOM.

⚠️ Why Not Use Array Index as a Key?

Using the array index as a key can cause bugs when items are reordered, inserted, or deleted. The index represents position, not identity, which can confuse React’s diffing process.

❌ Bad Example: Index as Key

export default function BadKeys() {
  const [items, setItems] = useState([
    { id: "x1", label: "First" },
    { id: "x2", label: "Second" },
  ]);

  function swap() {
    setItems(([a, b]) => [b, a]);
  }

  return (
    <div>
      <button onClick={swap}>Swap</button>
      {items.map((item, index) => (
        <div key={index}>
          <span>{item.label}</span>
          <input placeholder="Type here" />
        </div>
      ))}
    </div>
  );
}

After swapping, input values may appear under the wrong item because React cannot reliably track item identity using indexes.

📌 Real-World Example: User Cards

export default function UsersGrid({ users }) {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      {users.map(u => (
        <article key={u.id}>
          <img src={u.avatarUrl} alt={u.name} width={64} height={64} />
          <h3>{u.name}</h3>
          <p>{u.email}</p>
        </article>
      ))}
    </div>
  );
}

This pattern is common in dashboards and profile lists, where each card represents a unique entity.

✅ Best Practices for Lists and Keys

Always use a stable, unique key for each list item. Prefer IDs from your data source, such as database IDs. Avoid using Math.random() or array indexes as keys. Only use the index when the list is static and will never change. Always place the key on the outermost element returned by map().

🧾 Conclusion

Lists are fundamental to building dynamic UIs in React. By rendering data with map() and using proper keys, you ensure efficient updates, better performance, and fewer bugs. Mastering lists and keys is essential for building scalable and reliable React applications.

React Lists & Keys Explained with Simple Examples (2025 Guide)