Skip to content

Commit 2a3f1cb

Browse files
committed
docs: improve no-leaked-conditional-rendering rule docs
1 parent 1bf4baf commit 2a3f1cb

File tree

1 file changed

+9
-7
lines changed

1 file changed

+9
-7
lines changed

packages/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering.md

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,10 @@ react-x/no-leaked-conditional-rendering
2424

2525
## Description
2626

27-
Prevents problematic leaked values from being rendered.
27+
Prevents bugs caused by rendering values like `0`, `NaN`, or `""` in JSX when using the `&&` operator. These values are falsy in JavaScript, but React may still attempt to render them, leading to:
2828

29-
Using the `&&` operator to render some element conditionally in JSX can cause unexpected values being rendered, or even crashing the rendering.
29+
- Unexpected UI output: For example, `{0 && <div />}` renders `0` in the DOM instead of nothing.
30+
- Crashes in React Native: Rendering `NaN`, `0`, or `""` can cause runtime crashes in versions before React 18.
3031

3132
## Examples
3233

@@ -38,7 +39,7 @@ import React from "react";
3839
function MyComponent() {
3940
return <>{0 && <view />}</>;
4041
// ^
41-
// - Possible unexpected value will be rendered (React Dom: renders undesired '0', React Native: crashes 💥).
42+
// - Possible unexpected value will be rendered (React DOM: renders undesired '0', React Native: crashes 💥).
4243
}
4344
```
4445

@@ -48,7 +49,7 @@ import React from "react";
4849
function MyComponent() {
4950
return <>{NaN && <div />}</>;
5051
// ^^^
51-
// - Possible unexpected value will be rendered (React Dom: renders undesired 'NaN', React Native: crashes 💥).
52+
// - Possible unexpected value will be rendered (React DOM: renders undesired 'NaN', React Native: crashes 💥).
5253
}
5354
```
5455

@@ -58,14 +59,15 @@ import React from "react";
5859
function MyComponent() {
5960
return <>{"" && <div />}</>;
6061
// ^^
61-
// - Possible unexpected value will be rendered (React Dom: renders nothing, React Native, with React below 18: crashes 💥).
62+
// - Possible unexpected value will be rendered (React DOM: renders nothing, React Native, with React below 18: crashes 💥).
6263
}
6364
```
6465

6566
This can be avoided by:
6667

67-
- coercing the conditional to a boolean: `{!!someValue && <Something />}`
68-
- transforming the binary expression into a ternary expression which returns null for falsy values: `{someValue ? <Something /> : null}`
68+
- Coerce the value to a boolean: `{!!someValue && <Component />}`
69+
- Use a ternary: `{someValue ? <Component /> : null}`
70+
- Use comparisons: `{someValue > 0 && <Component />}`
6971

7072
### Failing
7173

0 commit comments

Comments
 (0)