List Rendering & Key
List rendering is the pattern of turning array data into repeated UI items. The key attached to each item tells React how to match the same logical item across renders.
▶Architecture Diagram
📊 Data FlowDashed line animations indicate the flow direction of data or requests
Many real screens are not a single card but a repeated pattern. When items are inserted, deleted, or reordered, React needs a stable way to tell which item is which. Without that identity, input state can jump rows and updates become wasteful or incorrect.
In direct DOM code, teams either redrew whole sections or manually managed which nodes to reuse. React reduced that manual work, but in exchange it needed developers to provide stable keys so item identity would stay meaningful over time.
A component maps over an array and returns JSX for each item, adding a key for identity. On the next render, React compares the old and new lists using those keys and decides which items are reused, inserted, moved, or removed.
Turning an array into JSX rows with stable keys
type Todo = {
id: string;
title: string;
};
function TodoList({ todos }: { todos: Todo[] }) {
return (
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
);
}`map()` creates repetition, and `key={todo.id}` tells React which piece of data each row belongs to.
Keys should follow logical identity, not screen position
type Todo = {
id: string;
title: string;
};
function SortedTodoList({ todos }: { todos: Todo[] }) {
const sortedTodos = [...todos].sort((a, b) =>
a.title.localeCompare(b.title)
);
return (
<ul>
{sortedTodos.map((todo) => (
<TodoRow key={todo.id} todo={todo} />
))}
</ul>
);
}Even when sorting changes the visible order, the key should keep pointing to the same logical item so React can preserve identity correctly.
List rendering is dynamic like conditional rendering, but it is about repetition and identity rather than branch choice. Keys are especially important because they are not about what the user sees; they are about how React preserves the right item across time.
In practice, database IDs or other stable identifiers make the best keys. Using array indexes often looks harmless at first, but becomes fragile once sorting, insertion, or deletion changes item positions.