[Feat] `no-render-return-undefined`: disallow components rendering undefined #3750

akulsr0 · 2024-05-08T07:14:42Z

codecov · 2024-05-08T07:27:18Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 51.86%. Comparing base (014ee05) to head (6d3cfec).

Additional details and impacted files

@@             Coverage Diff             @@
##           master    #3750       +/-   ##
===========================================
- Coverage   94.45%   51.86%   -42.60%     
===========================================
  Files         134        8      -126     
  Lines        9613      349     -9264     
  Branches     3486      128     -3358     
===========================================
- Hits         9080      181     -8899     
+ Misses        533      168      -365

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

akulsr0 · 2024-05-16T11:16:44Z

@ljharb Let me know your thoughts on this!

ljharb · 2024-05-24T16:23:08Z

docs/rules/no-render-return-undefined.md

@@ -0,0 +1,62 @@
+# Disallow returning undefined from react components (`react/no-render-return-undefined`)
+
+💼 This rule is enabled in the ☑️ `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-configs).


i think the docs need to be updated, run npm run update:eslint-docs

ljharb · 2024-05-24T16:23:26Z

docs/rules/no-render-return-undefined.md

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


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`.

ljharb · 2024-05-24T16:23:35Z

docs/rules/no-render-return-undefined.md

+
+> 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)


i'm not sure linking to the issue is needed

ljharb · 2024-05-24T16:23:42Z

docs/rules/no-render-return-undefined.md

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


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`.

ljharb · 2024-05-24T16:24:02Z

docs/rules/no-render-return-undefined.md

+
+This rule will warn if the `return` statement in a React component returns undefined.
+
+Examples of **incorrect** code for this rule:


let's add one that uses void

ljharb · 2024-05-24T16:26:44Z

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

+ },
+
+ create(context) {
+ function getReturnValue(returnNode) {


can this take context and be defined at module level instead?

ljharb · 2024-05-24T16:27:05Z

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

+ }
+ case 'ConditionalExpression': {
+ const possibleReturnValue = [getReturnValue(returnNode.consequent), getReturnValue(returnNode.alternate)];
+ const returnsUndefined = possibleReturnValue.some((val) => val === undefined);


Suggested change

const returnsUndefined = possibleReturnValue.some((val) => val === undefined);

const returnsUndefined = possibleReturnValue.some((val) => typeof val === 'undefined');

ljharb · 2024-05-24T16:27:39Z

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

+ case 'ConditionalExpression': {
+ const possibleReturnValue = [getReturnValue(returnNode.consequent), getReturnValue(returnNode.alternate)];
+ const returnsUndefined = possibleReturnValue.some((val) => val === undefined);
+ if (returnsUndefined) return undefined;


Suggested change

if (returnsUndefined) return undefined;

if (returnsUndefined) return;

ljharb · 2024-05-24T16:33:08Z

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

+
+ return !returnStatement
+ || returnIdentifierName === 'undefined'
+ || returnIdentifierValue === undefined


Suggested change

|| returnIdentifierValue === undefined

|| typeof returnIdentifierValue === 'undefined'

ljharb · 2024-05-24T16:34:22Z

package.json

@@ -15,7 +15,7 @@
 "test": "npm run unit-test",
 "posttest": "aud --production",
 "type-check": "tsc",
- "unit-test": "istanbul cover node_modules/mocha/bin/_mocha tests/lib/**/*.js tests/util/**/*.js tests/index.js",
+ "unit-test": "istanbul cover node_modules/mocha/bin/_mocha tests/lib/rules/no-render-return-undefined.js",


commenting here to ensure this doesn't get merged. fwiw you can npx mocha tests/lib/rules/no-render-return-undefined.js to run just that one file locally :-)

[Feat] no-render-return-undefined: initital commit

499e261

akulsr0 added 4 commits May 8, 2024 14:27

chore: add more test cases

86d7ac8

chore: add test cases

61981c7

chore: add tc for class components

34b6a94

chore: handle returning call expressions

56e7436

akulsr0 marked this pull request as ready for review May 15, 2024 10:35

chore: handle returning logical expressions

9202a30

ljharb marked this pull request as draft May 15, 2024 17:23

docs: add rule documentation

639f15f

chore: handle map callbacks

8aec646

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

Merge branch 'master' into akul/no-render-return-undefined

6d3cfec

ljharb added the new rule label May 24, 2024

ljharb requested changes May 24, 2024

View reviewed changes

ljharb marked this pull request as draft May 24, 2024 16:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat] `no-render-return-undefined`: disallow components rendering undefined #3750

[Feat] `no-render-return-undefined`: disallow components rendering undefined #3750

akulsr0 commented May 8, 2024 •

edited

codecov bot commented May 8, 2024 •

edited

akulsr0 commented May 16, 2024

ljharb May 24, 2024

ljharb May 24, 2024

ljharb May 24, 2024

ljharb May 24, 2024

ljharb May 24, 2024

ljharb May 24, 2024

ljharb May 24, 2024

ljharb May 24, 2024

ljharb May 24, 2024

ljharb May 24, 2024

		@@ -0,0 +1,62 @@
		# Disallow returning undefined from react components (`react/no-render-return-undefined`)

		💼 This rule is enabled in the ☑️ `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-configs).


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

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


		## Rule Details

		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:

	const returnsUndefined = possibleReturnValue.some((val) => val === undefined);
	const returnsUndefined = possibleReturnValue.some((val) => typeof val === 'undefined');

	if (returnsUndefined) return undefined;
	if (returnsUndefined) return;

	\|\| returnIdentifierValue === undefined
	\|\| typeof returnIdentifierValue === 'undefined'

[Feat] no-render-return-undefined: disallow components rendering undefined #3750

Are you sure you want to change the base?

[Feat] no-render-return-undefined: disallow components rendering undefined #3750

Conversation

akulsr0 commented May 8, 2024 • edited

codecov bot commented May 8, 2024 • edited

Codecov Report

akulsr0 commented May 16, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

[Feat] `no-render-return-undefined`: disallow components rendering undefined #3750

[Feat] `no-render-return-undefined`: disallow components rendering undefined #3750

akulsr0 commented May 8, 2024 •

edited

codecov bot commented May 8, 2024 •

edited