[New] add `no-render-return-undefined`: disallow components rendering undefined by akulsr0 · Pull Request #3750 · jsx-eslint/eslint-plugin-react

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 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 · 2024-05-16T11:16:44Z

@ljharb Let me know your thoughts on this!

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

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

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

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

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

akulsr0 · 2024-05-29T14:42:31Z

I've pushed the review changes

akulsr0 · 2024-06-20T09:57:47Z

Bumping this up!

ljharb

There's still some unaddressed comments on the docs.

ljharb · 2024-07-11T17:44:22Z

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


ljharb · 2024-07-11T17:44:35Z

+function getUI() {
+  if (condition) return <h1>Hello</h1>;
+}
+function App() {
+  return getUI();
+}


Yes, I don't think we necessarily have to support this - I'm saying that the docs should be updated to reflect the caveats.

ljharb · 2024-07-11T17:46:15Z

+    const value = returnIdentifierVar.defs[0].node.init;
+    if (
+      returnIdentifierVar.defs[0].node


if line 35 is nullish, then line 33 will throw - i think this needs to be checked before accessing .init

ljharb · 2024-07-11T17:46:59Z

+        const isCalleeObjArray = calleeObjNode.defs[0].node.init.type === 'ArrayExpression';
+        const isMapCall = isCalleeObjArray && calleePropertyName === 'map';
+        if (isMapCall) {
+          const mapCallback = returnNode.arguments[0];


can you add a test for an SFC that omits return entirely?

ljharb · 2024-07-11T17:47:19Z

+    return value;
+  }
+
+  switch (returnNode.type) {


let's use an if/else here instead of a switch

ljharb · 2024-07-11T17:48:29Z

+            function App() {
+                return null;
+            }
+        `,


Suggested change

function App() {

return null;

}

`,

function App() {

return null;

}

`,

similar changes on all the code snippets

[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

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

refactor: pr review changes

d1814c1

akulsr0 force-pushed the akul/no-render-return-undefined branch from 6d3cfec to d1814c1 Compare May 25, 2024 05:13

akulsr0 added 3 commits May 25, 2024 17:01

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

7905adf

fix: failing tests

b7ca1dd

chore: pr review change

f4983ae

akulsr0 marked this pull request as ready for review June 6, 2024 16:31

ljharb requested changes Jun 20, 2024

View reviewed changes

Comment thread lib/rules/index.js Outdated

ljharb marked this pull request as draft June 20, 2024 20:47

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

akulsr0 added 2 commits June 21, 2024 08:11

refactor: sort rules index alphabetically

0b56b09

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

94e9817

ljharb force-pushed the master branch from be61e18 to 380e32c Compare July 4, 2024 04:21

ljharb force-pushed the master branch from 380e32c to 51d342b Compare July 4, 2024 15:25

ljharb requested changes Jul 11, 2024

View reviewed changes

mgamis-msft mentioned this pull request Oct 24, 2024

Breakout rooms banner fix for react 17 and lower Azure/communication-ui-library#5358

Merged

3 tasks

ljharb force-pushed the master branch from 301a48d to 2c0b10c Compare December 9, 2024 20:26

ljharb force-pushed the master branch from 2df8be2 to 012ec39 Compare April 1, 2026 20:54


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

Uh oh!

Conversation

akulsr0 commented May 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented May 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

akulsr0 commented May 16, 2024

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

akulsr0 commented May 29, 2024

Uh oh!

akulsr0 commented Jun 20, 2024

Uh oh!

ljharb left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

akulsr0 commented May 8, 2024 •

edited

Loading

codecov Bot commented May 8, 2024 •

edited

Loading