Skip to content

Commit 639f15f

Browse files
committed
docs: add rule documentation
1 parent 9202a30 commit 639f15f

File tree

2 files changed

+113
-0
lines changed

2 files changed

+113
-0
lines changed
+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Disallow returning undefined from react components (`react/no-render-return-undefined`)
2+
3+
💼 This rule is enabled in the ☑️ `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-configs).
4+
5+
<!-- end auto-generated rule header -->
6+
7+
> In React 18, components may render undefined, and React will render nothing to the DOM instead of throwing an error. However, accidentally rendering nothing in a component could still cause surprises. This rule will warn if the `return` statement in a React Component returns undefined.
8+
9+
Issue: [#3020](https://github.com/jsx-eslint/eslint-plugin-react/issues/3020)
10+
11+
## Rule Details
12+
13+
This rule will warn if the `return` statement in a React component returns undefined.
14+
15+
Examples of **incorrect** code for this rule:
16+
17+
```jsx
18+
function App() {
19+
return undefined;
20+
}
21+
22+
// OR
23+
24+
let ui;
25+
function App() {
26+
return ui;
27+
}
28+
29+
// OR
30+
31+
function getUI() {
32+
if (condition) return <h1>Hello</h1>;
33+
}
34+
function App() {
35+
return getUI();
36+
}
37+
```
38+
39+
Examples of **correct** code for this rule:
40+
41+
```jsx
42+
function App() {
43+
return <div />;
44+
}
45+
46+
// OR
47+
48+
let ui = <div />;
49+
function App() {
50+
return ui;
51+
}
52+
53+
// OR
54+
55+
function getUI() {
56+
if (condition) return <h1>Hello</h1>;
57+
return null;
58+
}
59+
function App() {
60+
return getUI();
61+
}
62+
```

tests/lib/rules/no-render-return-undefined.js

+51
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,25 @@ ruleTester.run('no-render-return-undefined', rule, {
258258
}
259259
`,
260260
},
261+
{
262+
code: `
263+
let ui = <Component />;
264+
function App() {
265+
return ui;
266+
}
267+
`,
268+
},
269+
{
270+
code: `
271+
function getUI() {
272+
if(condition) return <h1>Hello</h1>;
273+
return null;
274+
}
275+
function App() {
276+
return getUI();
277+
}
278+
`,
279+
},
261280
{
262281
code: `
263282
function App() {
@@ -669,6 +688,38 @@ ruleTester.run('no-render-return-undefined', rule, {
669688
`,
670689
errors: [{ messageId: 'returnsUndefined' }],
671690
},
691+
{
692+
code: `
693+
let ui;
694+
function App() {
695+
return ui;
696+
}
697+
`,
698+
errors: [{ messageId: 'returnsUndefined' }],
699+
},
700+
{
701+
code: `
702+
let ui;
703+
function App() {
704+
if(cond) {
705+
ui = <div />;
706+
}
707+
return ui;
708+
}
709+
`,
710+
errors: [{ messageId: 'returnsUndefined' }],
711+
},
712+
{
713+
code: `
714+
function getUI() {
715+
if(condition) return <h1>Hello</h1>;
716+
}
717+
function App() {
718+
return getUI();
719+
}
720+
`,
721+
errors: [{ messageId: 'returnsUndefined' }],
722+
},
672723
{
673724
code: `
674725
function App() {

0 commit comments

Comments
 (0)