Skip to content

Commit 4681a80

Browse files
committed
docs: minor improvements
1 parent 9b58d31 commit 4681a80

File tree

3 files changed

+6
-12
lines changed

3 files changed

+6
-12
lines changed

apps/website/content/docs/rules/overview.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ full: true
7070
| [`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 | |
7171
| [`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 | |
7272
| [`no-string-refs`](./no-string-refs) | 2️⃣ | `🔄` | Replaces string refs with callback refs | >=16.3.0 |
73-
| [`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 | |
7474
| [`no-unnecessary-use-callback`](./no-unnecessary-use-callback) | 0️⃣ | `🧪` | Disallow unnecessary usage of `useCallback` | |
7575
| [`no-unnecessary-use-memo`](./no-unnecessary-use-memo) | 0️⃣ | `🧪` | Disallow unnecessary usage of `useMemo` | |
7676
| [`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 | |

packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.mdx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,3 +130,5 @@ function MyComponent() {
130130
Prevents `key` from not being explicitly specified (e.g. spreading `key` from objects).
131131
- [`no-array-index-key`](./no-array-index-key)\
132132
Warns when an array `index` is used as a `key` prop.
133+
- [`no-unnecessary-key`](./no-unnecessary-key)\
134+
Prevents `key` from being placed on non-top-level elements in a list rendering.

packages/plugins/eslint-plugin-react-x/src/rules/no-unnecessary-key.mdx

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ react-x/no-unnecessary-key
2020

2121
## Description
2222

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.
2424

2525
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.
2626

@@ -47,13 +47,6 @@ things.map(thing => (
4747
<div>{thing.description}</div>
4848
</React.Fragment>
4949
))
50-
51-
// This also applies to array literals
52-
const elements = [
53-
<div key="1">
54-
<span key="child-span">Item 1</span> {/* 🚨 This key is unnecessary */}
55-
</div>
56-
];
5750
```
5851

5952
### Passing
@@ -70,9 +63,6 @@ things.map(thing => (
7063
</React.Fragment>
7164
))
7265

73-
// Keys on top-level elements in an array literal are correct
74-
const elements = [<div key="1" />, <div key="2" />];
75-
7666
// Static keys used to re-mount components are not affected by this rule,
7767
// as they are not inside a list rendering context.
7868
function ComponentWithStaticKey() {
@@ -103,3 +93,5 @@ function ComponentWithStaticKey() {
10393
Prevents `key` from not being explicitly specified (e.g. spreading `key` from objects).
10494
- [`no-array-index-key`](./no-array-index-key)\
10595
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

Comments
 (0)