[Fix] jsx-no-leaked-render: Don't report errors on empty strings if…

… React >= v18
jsx-eslint · Nov 14, 2022 · 5668f9d · 5668f9d
1 parent 12e9838
commit 5668f9d
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,9 +16,11 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`sort-prop-types`]: restore autofixing ([#3452][] @ROSSROSALES)
 * [`no-unknown-property`]: do not check `fbs` elements ([#3494][] @brianogilvie)
 * [`jsx-newline`]: No newline between comments and jsx elements ([#3493][] @justmejulian)
+* [`jsx-no-leaked-render`]: Don't report errors on empty strings if React >= v18 ([#3488][] @himanshu007-creator)
 
 [#3494]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3494
 [#3493]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3493
+[#3488]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3488
 [#3461]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3461
 [#3452]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3452
 [#3449]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3449

diff --git a/lib/rules/jsx-no-leaked-render.js b/lib/rules/jsx-no-leaked-render.js
@@ -7,6 +7,7 @@
 
 const docsUrl = require('../util/docsUrl');
 const report = require('../util/report');
+const testReactVersion = require('../util/version').testReactVersion;
 const isParenthesized = require('../util/ast').isParenthesized;
 
 //------------------------------------------------------------------------------
@@ -130,6 +131,9 @@ module.exports = {
           }
         }
 
+        if (testReactVersion(context, '>= 18.0.0') && node.left.value === '') {
+          return;
+        }
         report(context, messages.noPotentialLeakedRender, 'noPotentialLeakedRender', {
           node,
           fix(fixer) {

diff --git a/tests/lib/rules/jsx-no-leaked-render.js b/tests/lib/rules/jsx-no-leaked-render.js
@@ -218,7 +218,41 @@ ruleTester.run('jsx-no-leaked-render', rule, {
         },
         {
           message: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
-          line: 6,
+          line: 7,
+          column: 14,
+        },
+      ],
+      output: `
+      const Example = () => {
+        return (
+          <>
+            {0 ? <Something/> : null}
+            {'' ? <Something/> : null}
+            {NaN ? <Something/> : null}
+          </>
+        )
+      }
+      `,
+      settings: { react: { version: '17.999.999' } },
+    },
+
+    {
+      code: `
+      const Example = () => {
+        return (
+          <>
+            {0 && <Something/>}
+            {'' && <Something/>}
+            {NaN && <Something/>}
+          </>
+        )
+      }
+      `,
+      features: ['fragment'],
+      errors: [
+        {
+          message: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
+          line: 5,
           column: 14,
         },
         {
@@ -232,12 +266,13 @@ ruleTester.run('jsx-no-leaked-render', rule, {
         return (
           <>
             {0 ? <Something/> : null}
-            {'' ? <Something/> : null}
+            {'' && <Something/>}
             {NaN ? <Something/> : null}
           </>
         )
       }
       `,
+      settings: { react: { version: '18.0.0' } },
     },
 
     // Invalid tests with both strategies enabled (default)