Metadata

ID: tsx-react/tsx-key

Language: TypeScript

Severity: Error

Category: Error Prone

Description

In React, each JSX element rendered within a list or an iterator (such as Array.prototype.map()) requires a unique and stable key prop. This key helps React efficiently identify which items have changed, are added, or are removed during updates. Failing to provide a key can lead to performance issues, unexpected rendering behavior, incorrect component state, and stale UI, especially when list items are reordered, filtered, or added/removed.

How to Remediate

To fix this, provide a unique and stable key prop to each top-level JSX element returned within a list or iterator. Ideally, the key should be a unique identifier from your data (e.g., item.id). Avoid using array indices as keys if the list items can change order, be filtered, or be added/removed, as this can negate the benefits of keys. Note that React Fragment shorthand (<>...</>) does not support the key prop; for keyed fragments, use React.Fragment explicitly (e.g., <React.Fragment key={item.id}>...</React.Fragment>).

Non-Compliant Code Examples

[<></>];
[<Hello a="foo" />, <Hello>foo</Hello>, <Hello />];
[<Hello />, <Hello a="">foo</Hello>, <Hello />];
data.map(x => <Hello a="" />);
data.map(x => <Hello>{x}</Hello>);
data.map(x => <Hello a="">{x}</Hello>);
data.map(x => { return <Hello>{x}</Hello>});
data.map(x => { return <Hello a="">{x}</Hello>});
data.map(function(x) { return <Hello>{x}</Hello>});
data.map(function(x) { return <Hello>{x}</Hello>});
Array.from([1, 2, 3], (x) => <Hello>{x}</Hello>);

Compliant Code Examples

[<Hello key="first" test="foo" />, <Hello key="second" />, <Hello key="third" />];
data.map((x) => <Hello key={x.id}>{x}</Hello>);
Array.from([1, 2, 3], (x) => <Hello key={x.id}>{x}</Hello>);
<Hello key={id} {...{ id, caption }} />