Frontend Beginner 16 views

React Key Warning

React warns that list items are missing unique "key" props for efficient rendering.

Explanation

React Key Warning is a console warning (not an error) that occurs when rendering a list of elements without providing unique "key" props. React uses keys to efficiently track which items have changed, been added, or removed. Without keys, React falls back to index-based comparison, which can cause incorrect updates, performance issues, and state bugs. Common causes include using array index as key (which changes during reordering), forgetting to add keys, or using non-unique values as keys.

Common Causes

List items missing key prop
Using array index as key for dynamic lists
Non-unique key values
Using object references as keys
Key prop missing on Fragment wrappers

Solution

Always provide a unique, stable key prop when rendering lists. Use unique identifiers from your data (database IDs, UUIDs) as keys. Never use array indices as keys if the list can be reordered, filtered, or have items added/removed. Ensure keys are strings or numbers, not objects. For form elements, use unique field names or IDs. In React 18+, use the React DevTools to identify which components are missing keys. Consider using the Fragment shorthand with keys when wrapping list items.

Code Example

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

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

// Don't use index as key for dynamic lists
{users.map((user, index) => (
    <li key={index}>{user.name}</li>  // bad if list can reorder!
))}

// Use stable unique ID
{users.map(user => (
    <li key={user.uuid}>{user.name}</li>  // good!
))}

// For Fragments with keys
import { Fragment } from 'react';
{items.map(item => (
    <Fragment key={item.id}>
        <dt>{item.term}</dt>
        <dd>{item.definition}</dd>
    </Fragment>
))}

Error Information

Language

javascript

Framework

react

Difficulty

Beginner

Views

Related Errors

ERESOLVE JavaScript

React Key Warning

Explanation

Common Causes

Solution

Code Example

Error Information

Related Errors

npm ERESOLVE Unable to Resolve Dependency Tree

Port Already in Use

Invalid CSS Property

ERR_REQUIRE_ESM