How to use the key prop in React lists
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using the key prop correctly in React lists is crucial for optimal performance, proper component state management, and avoiding rendering bugs during list updates. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented key props in countless React components including data tables, navigation menus, and dynamic content lists in enterprise applications. From my expertise, the most important approach is to use stable, unique identifiers from your data as key values. This method enables React’s reconciliation algorithm to efficiently track changes, preserve component state, and minimize DOM manipulations during list updates.
Use unique, stable identifiers from your data as key props for optimal list rendering performance.
function TodoList({ todos }) {
return (
<ul>
{todos.map(todo => (
<li key={todo.id}>
<input type="checkbox" checked={todo.completed} />
<span>{todo.text}</span>
</li>
))}
</ul>
)
}
// Good: Using unique ID
<TodoItem key={todo.id} todo={todo} />
// Bad: Using array index
<TodoItem key={index} todo={todo} />
The key prop helps React identify which list items have changed, been added, or removed during re-renders. Always use unique, stable identifiers like item.id from your data rather than array indices. When using array indices as keys, React may incorrectly reuse component instances when the list order changes, leading to bugs with form inputs, component state, and animations. Stable keys enable React to preserve component state and minimize DOM updates for better performance.
Best Practice Note:
This is the same approach we use in CoreUI React components for data grids and dynamic lists to ensure reliable rendering.
If your data lacks unique identifiers, generate stable keys using libraries like uuid or create composite keys: key={${item.category}-${item.name}} - never use Math.random() or array indices for dynamic lists.
