You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: apps/website/content/docs/rules/overview.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -70,7 +70,7 @@ full: true
70
70
|[`no-set-state-in-component-did-update`](./no-set-state-in-component-did-update)| 1️⃣ || Disallow calling `this.setState` in `componentDidUpdate` outside of functions, such as callbacks ||
71
71
|[`no-set-state-in-component-will-update`](./no-set-state-in-component-will-update)| 1️⃣ || Disallow calling `this.setState` in `componentWillUpdate` outside of functions, such as callbacks ||
|[`no-unnecessary-key`](./no-unnecessary-key)| 0️⃣ |`🧪`| Prevents the use of unnecessary `key`props on JSX elements when rendering lists||
73
+
|[`no-unnecessary-key`](./no-unnecessary-key)| 0️⃣ |`🧪`| Prevents `key`from being placed on non-top-level elements in a list rendering ||
74
74
|[`no-unnecessary-use-callback`](./no-unnecessary-use-callback)| 0️⃣ |`🧪`| Disallow unnecessary usage of `useCallback`||
75
75
|[`no-unnecessary-use-memo`](./no-unnecessary-use-memo)| 0️⃣ |`🧪`| Disallow unnecessary usage of `useMemo`||
76
76
|[`no-unnecessary-use-prefix`](./no-unnecessary-use-prefix)| 0️⃣ || Enforces that a function with the `use` prefix should use at least one Hook inside of it ||
Copy file name to clipboardExpand all lines: packages/plugins/eslint-plugin-react-x/src/rules/no-unnecessary-key.mdx
+3-11Lines changed: 3 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,7 +20,7 @@ react-x/no-unnecessary-key
20
20
21
21
## Description
22
22
23
-
This rule prevents the use of unnecessary `key`props on JSX elements when rendering lists.
23
+
This rule prevents `key`from being placed on non-top-level elements in a list rendering.
24
24
25
25
When rendering a list of elements in React, the `key` prop should only be placed on the outermost element for each item in the list. Adding keys to nested child elements is redundant, can cause confusion, and may lead to subtle bugs during refactoring.
26
26
@@ -47,13 +47,6 @@ things.map(thing => (
47
47
<div>{thing.description}</div>
48
48
</React.Fragment>
49
49
))
50
-
51
-
// This also applies to array literals
52
-
constelements= [
53
-
<div key="1">
54
-
<span key="child-span">Item 1</span> {/* 🚨 This key is unnecessary */}
55
-
</div>
56
-
];
57
50
```
58
51
59
52
### Passing
@@ -70,9 +63,6 @@ things.map(thing => (
70
63
</React.Fragment>
71
64
))
72
65
73
-
// Keys on top-level elements in an array literal are correct
74
-
constelements= [<div key="1"/>, <div key="2"/>];
75
-
76
66
// Static keys used to re-mount components are not affected by this rule,
77
67
// as they are not inside a list rendering context.
78
68
functionComponentWithStaticKey() {
@@ -103,3 +93,5 @@ function ComponentWithStaticKey() {
103
93
Prevents `key` from not being explicitly specified (e.g. spreading `key` from objects).
104
94
-[`no-array-index-key`](./no-array-index-key)\
105
95
Warns when an array `index` is used as a `key` prop.
96
+
-[`no-duplicate-key`](./no-duplicate-key)\
97
+
Prevents duplicate `key` props within the same list.
0 commit comments