-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[New] add no-render-return-undefined
: disallow components rendering undefined
#3750
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