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

문서 > 코드 분석 > Static Analysis Rules > A list component should have a key to prevent re-rendering

이 페이지는 아직 한국어로 제공되지 않으며 번역 작업 중입니다. 번역에 관한 질문이나 의견이 있으시면 언제든지 저희에게 연락해 주십시오.

Metadata

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

Language: JavaScript

Severity: Warning

Category: Code Style

Description

In JavaScript, 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>
    );
}