React Lists & Keys

In React, lists allow you to render multiple items dynamically — like products, users, or messages. To render lists efficiently, React uses keys to identify elements and optimize updates.

Understanding lists and keys is essential for performance, readability, and dynamic UI development.

Rendering Lists in React

React makes it easy to render arrays using JavaScript’s map() method.

Example – Simple List Rendering

import React from "react";

function NameList() {
  const names = ["Alice", "Bob", "Charlie"];

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

export default NameList;

map() creates a new <li> for each item.
Curly braces {} embed JavaScript inside JSX.
This works for any array of data.

Importance of Keys in Lists

Keys are unique identifiers for elements in a list. They help React track changes, additions, or deletions without re-rendering the entire list.

Example – Adding Keys

function NameList() {
  const names = ["Alice", "Bob", "Charlie"];

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

Example – Using Unique IDs

React can now efficiently track which items changed when the list updates.

const users = [
  { id: 101, name: "Alice" },
  { id: 102, name: "Bob" },
  { id: 103, name: "Charlie" },
];

function UserList() {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Rendering Multiple Elements per List Item

Sometimes, a list item contains multiple elements, like a title and description. React Fragments help avoid unnecessary <div> wrappers.

Example – Fragment with Keys

Fragments allow multiple elements without adding extra DOM nodes.
Each fragment has a unique key for React to track changes.

const products = [
  { id: 1, name: "Laptop", price: "$1000" },
  { id: 2, name: "Phone", price: "$500" },
];

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

Conditional Rendering Inside Lists

You can combine lists with conditional rendering for dynamic UIs.

Example – Filtering List Items

filter() removes offline users.
map() renders only the filtered users.
Keys remain unique for each item.

const users = [
  { id: 1, name: "Alice", online: true },
  { id: 2, name: "Bob", online: false },
  { id: 3, name: "Charlie", online: true },
];

function OnlineUsers() {
  return (
    <ul>
      {users
        .filter((user) => user.online)
        .map((user) => (
          <li key={user.id}>{user.name} is online</li>
        ))}
    </ul>
  );
}

Updating Lists Dynamically

React efficiently updates lists thanks to keys. Only the changed elements re-render — improving performance for large datasets.

Example – Dynamic List Update

import React, { useState } from "react";

function TodoList() {
  const [tasks, setTasks] = useState([
    { id: 1, text: "Buy groceries" },
    { id: 2, text: "Walk the dog" },
  ]);

  const addTask = () => {
    const newTask = { id: Date.now(), text: "New Task" };
    setTasks([...tasks, newTask]);
  };

  return (
    <div>
      <button onClick={addTask}>Add Task</button>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.text}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

setTasks updates the array.
React uses key to re-render only the new task.
This avoids re-rendering the entire list.