Skip to content

Commit dfd64ae

Browse files
karlhorkyljharb
authored andcommitted
[Docs] jsx-no-leaked-render: Remove mentions of empty strings for React 18
Ref: #3203 (comment)
1 parent c02d4e3 commit dfd64ae

File tree

2 files changed

+20
-16
lines changed

2 files changed

+20
-16
lines changed

CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,13 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
1818
* [`jsx-newline`]: No newline between comments and jsx elements ([#3493][] @justmejulian)
1919
* [`jsx-no-leaked-render`]: Don't report errors on empty strings if React >= v18 ([#3488][] @himanshu007-creator)
2020

21+
### Changed
22+
* [Docs] [`jsx-no-leaked-render`]: Remove mentions of empty strings for React 18 ([#3468][] @karlhorky)
23+
2124
[#3494]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3494
2225
[#3493]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3493
2326
[#3488]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3488
27+
[#3468]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3468
2428
[#3461]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3461
2529
[#3452]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3452
2630
[#3449]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3449

docs/rules/jsx-no-leaked-render.md

+16-16
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,23 @@ Using the `&&` operator to render some element conditionally in JSX can cause un
1010

1111
This rule aims to prevent dangerous leaked values from being rendered since they can cause unexpected values reaching the final DOM or even crashing your render method.
1212

13-
In React, you might end up rendering unexpected values like `0` or `NaN`. In React Native, your render method will crash if you render `0`, `''`, or `NaN`:
13+
In React, you might end up rendering unexpected values like `0` or `NaN`. In React Native, your render method will even crash if you render these values:
1414

1515
```jsx
1616
const Example = () => {
1717
return (
1818
<>
19-
{0 && <Something/>}
19+
{0 && <Something />}
2020
{/* React: renders undesired 0 */}
2121
{/* React Native: crashes 💥 */}
2222

23-
{'' && <Something/>}
24-
{/* React: renders nothing */}
25-
{/* React Native: crashes 💥 */}
26-
27-
{NaN && <Something/>}
23+
{NaN && <Something />}
2824
{/* React: renders undesired NaN */}
2925
{/* React Native: crashes 💥 */}
26+
27+
{'' && <Something />}
28+
{/* React: renders nothing */}
29+
{/* React Native, with React < 18: crashes 💥 */}
3030
</>
3131
)
3232
}
@@ -55,7 +55,7 @@ const Component = ({ count }) => {
5555

5656
```jsx
5757
const Component = ({ elements }) => {
58-
return <div>{elements.length && <List elements={elements}/>}</div>
58+
return <div>{elements.length && <List elements={elements} />}</div>
5959
}
6060
```
6161

@@ -71,21 +71,21 @@ const Component = ({ nestedCollection }) => {
7171

7272
```jsx
7373
const Component = ({ elements }) => {
74-
return <div>{elements[0] && <List elements={elements}/>}</div>
74+
return <div>{elements[0] && <List elements={elements} />}</div>
7575
}
7676
```
7777

7878
```jsx
7979
const Component = ({ numberA, numberB }) => {
80-
return <div>{(numberA || numberB) && <Results>{numberA+numberB}</Results>}</div>
80+
return <div>{(numberA || numberB) && <Results>{numberA + numberB}</Results>}</div>
8181
}
8282
```
8383

8484
```jsx
8585
// If the condition is a boolean value, this rule will report the logical expression
8686
// since it can't infer the type of the condition.
8787
const Component = ({ someBool }) => {
88-
return <div>{someBool && <Results>{numberA+numberB}</Results>}</div>
88+
return <div>{someBool && <Results>{numberA + numberB}</Results>}</div>
8989
}
9090
```
9191

@@ -119,31 +119,31 @@ const Component = ({ elements, count }) => {
119119

120120
```jsx
121121
const Component = ({ elements }) => {
122-
return <div>{!!elements.length && <List elements={elements}/>}</div>
122+
return <div>{!!elements.length && <List elements={elements} />}</div>
123123
}
124124
```
125125

126126
```jsx
127127
const Component = ({ elements }) => {
128-
return <div>{Boolean(elements.length) && <List elements={elements}/>}</div>
128+
return <div>{Boolean(elements.length) && <List elements={elements} />}</div>
129129
}
130130
```
131131

132132
```jsx
133133
const Component = ({ elements }) => {
134-
return <div>{elements.length > 0 && <List elements={elements}/>}</div>
134+
return <div>{elements.length > 0 && <List elements={elements} />}</div>
135135
}
136136
```
137137

138138
```jsx
139139
const Component = ({ elements }) => {
140-
return <div>{elements.length ? <List elements={elements}/> : null}</div>
140+
return <div>{elements.length ? <List elements={elements} /> : null}</div>
141141
}
142142
```
143143

144144
```jsx
145145
const Component = ({ elements }) => {
146-
return <div>{elements.length ? <List elements={elements}/> : <EmptyList />}</div>
146+
return <div>{elements.length ? <List elements={elements} /> : <EmptyList />}</div>
147147
}
148148
```
149149

0 commit comments

Comments
 (0)