Skip to content
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

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
docs/rules/no-render-return-undefined.md Show resolved Hide resolved

<!-- 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

lib/rules/no-render-return-undefined.js Outdated Show resolved Hide resolved
lib/rules/no-render-return-undefined.js Outdated Show resolved Hide resolved
lib/rules/no-render-return-undefined.js Outdated Show resolved Hide resolved
lib/rules/no-render-return-undefined.js Outdated Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
@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.

lib/rules/index.js Outdated Show resolved Hide resolved
@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

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

Successfully merging this pull request may close these issues.

React 18: Warn when components render undefined
2 participants