-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
[New] add no-render-return-undefined
: disallow components rendering undefined
#3750
New issue
Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? # to your account
base: master
Are you sure you want to change the base?
[New] add no-render-return-undefined
: disallow components rendering undefined
#3750
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #3750 +/- ##
==========================================
- Coverage 97.62% 94.45% -3.18%
==========================================
Files 134 135 +1
Lines 9617 9708 +91
Branches 3488 3535 +47
==========================================
- Hits 9389 9170 -219
- Misses 228 538 +310 ☔ View full report in Codecov by Sentry. |
@ljharb Let me know your thoughts on this! |
|
||
<!-- end auto-generated rule header --> | ||
|
||
> 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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
> 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. | |
> Starting 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`. |
|
||
> 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. | ||
|
||
Issue: [#3020](https://github.com/jsx-eslint/eslint-plugin-react/issues/3020) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i'm not sure linking to the issue is needed
|
||
## Rule Details | ||
|
||
This rule will warn if the `return` statement in a React component returns undefined. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This rule will warn if the `return` statement in a React component returns undefined. | |
This rule will warn if the `return` statement in a React component returns `undefined`. |
|
||
This rule will warn if the `return` statement in a React component returns undefined. | ||
|
||
Examples of **incorrect** code for this rule: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let's add one that uses void
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ping
6d3cfec
to
d1814c1
Compare
I've pushed the review changes |
Bumping this up! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There's still some unaddressed comments on the docs.
no-render-return-undefined
: disallow components rendering undefinedno-render-return-undefined
: disallow components rendering undefined
|
||
This rule will warn if the `return` statement in a React component returns undefined. | ||
|
||
Examples of **incorrect** code for this rule: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ping
function getUI() { | ||
if (condition) return <h1>Hello</h1>; | ||
} | ||
function App() { | ||
return getUI(); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, I don't think we necessarily have to support this - I'm saying that the docs should be updated to reflect the caveats.
const value = returnIdentifierVar.defs[0].node.init; | ||
if ( | ||
returnIdentifierVar.defs[0].node |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if line 35 is nullish, then line 33 will throw - i think this needs to be checked before accessing .init
const isCalleeObjArray = calleeObjNode.defs[0].node.init.type === 'ArrayExpression'; | ||
const isMapCall = isCalleeObjArray && calleePropertyName === 'map'; | ||
if (isMapCall) { | ||
const mapCallback = returnNode.arguments[0]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can you add a test for an SFC that omits return
entirely?
return value; | ||
} | ||
|
||
switch (returnNode.type) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let's use an if/else here instead of a switch
function App() { | ||
return null; | ||
} | ||
`, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
function App() { | |
return null; | |
} | |
`, | |
function App() { | |
return null; | |
} | |
`, |
similar changes on all the code snippets
Closes #3020