Skip to content

[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

Draft
wants to merge 14 commits into
base: master
Choose a base branch
from

Conversation

akulsr0
Copy link
Contributor

@akulsr0 akulsr0 commented May 8, 2024

Closes #3020

Copy link

codecov bot commented May 8, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 94.45%. Comparing base (cef8123) to head (94e9817).
Report is 2 commits behind head on master.

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.
📢 Have feedback on the report? Share it here.

@akulsr0 akulsr0 marked this pull request as ready for review May 15, 2024 10:35
@ljharb ljharb marked this pull request as draft May 15, 2024 17:23
@akulsr0
Copy link
Contributor Author

akulsr0 commented May 16, 2024

@ljharb Let me know your thoughts on this!

@akulsr0 akulsr0 marked this pull request as ready for review May 18, 2024 14:50

<!-- 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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
> 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)
Copy link
Member

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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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:
Copy link
Member

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ping

@ljharb ljharb marked this pull request as draft May 24, 2024 16:34
@akulsr0 akulsr0 force-pushed the akul/no-render-return-undefined branch from 6d3cfec to d1814c1 Compare May 25, 2024 05:13
@akulsr0
Copy link
Contributor Author

akulsr0 commented May 29, 2024

I've pushed the review changes

@akulsr0 akulsr0 marked this pull request as ready for review June 6, 2024 16:31
@akulsr0
Copy link
Contributor Author

akulsr0 commented Jun 20, 2024

Bumping this up!

Copy link
Member

@ljharb ljharb left a 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.

@ljharb ljharb marked this pull request as draft June 20, 2024 20:47
@ljharb ljharb changed the title [Feat] no-render-return-undefined: disallow components rendering undefined [New] add no-render-return-undefined: disallow components rendering undefined Jun 20, 2024

This rule will warn if the `return` statement in a React component returns undefined.

Examples of **incorrect** code for this rule:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ping

Comment on lines +31 to +38
function getUI() {
if (condition) return <h1>Hello</h1>;
}
function App() {
return getUI();
}
Copy link
Member

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.

Comment on lines +33 to +35
const value = returnIdentifierVar.defs[0].node.init;
if (
returnIdentifierVar.defs[0].node
Copy link
Member

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];
Copy link
Member

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) {
Copy link
Member

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

Comment on lines +188 to +191
function App() {
return null;
}
`,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
function App() {
return null;
}
`,
function App() {
return null;
}
`,

similar changes on all the code snippets

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
Development

Successfully merging this pull request may close these issues.

React 18: Warn when components render undefined
2 participants