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
keyfor 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;
setTasksupdates the array.- React uses
keyto re-render only the new task. - This avoids re-rendering the entire list.