A list component should have a key to prevent re-rendering

This page is not yet available in Spanish. We are working on its translation.
If you have any questions or feedback about our current translation project, feel free to reach out to us!

Metadata

ID: tsx-react/list-component-needs-key

Language: TypeScript

Severity: Warning

Category: Code Style

Description

In TypeScript, particularly when dealing with React, it’s important to provide a unique key prop for each child in a list. This rule ensures that each item in a list has a unique key. Keys help React identify which items have changed, are added, or are removed, and help in efficient re-rendering of the component.

Not having a unique key can lead to issues with the component’s state and inefficient re-rendering. Without keys, React has to fall back to a slower, less efficient default diffing algorithm.

To avoid violating this rule, always provide a unique key when mapping over an array to create a list of React elements.

Non-Compliant Code Examples

function UserList(props) {
    return (
        <ul>
            {props.users.map(user => (
                <li>
                    {user.name} - {user.email}
                </li>
            ))}
        </ul>
    );
}

Compliant Code Examples

function UserList(props) {
    return (
        <ul>
            {props.users.map((user) => (
                <li key={user.id}>
                    {user.name} - {user.email}
                </li>
            ))}
        </ul>
    );
}
https://static.datadoghq.com/static/images/logos/github_avatar.svg https://static.datadoghq.com/static/images/logos/vscode_avatar.svg jetbrains

Seamless integrations. Try Datadog Code Analysis