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

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

Hide file tree

Showing 3 changed files with 67 additions and 21 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') && leftSide.type === 'Literal' && leftSide.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
@@ -199,45 +199,85 @@ ruleTester.run('jsx-no-leaked-render', rule, {
     // Common invalid cases with default options
     {
       code: `
-      const Example = () => {
-        return (
-          <>
-            {0 && <Something/>}
-            {'' && <Something/>}
-            {NaN && <Something/>}
-          </>
-        )
-      }
+        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,
+          column: 16,
         },
         {
           message: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
           line: 6,
-          column: 14,
+          column: 16,
+        },
+        {
+          message: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
+          line: 7,
+          column: 16,
+        },
+      ],
+      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: 16,
         },
         {
           message: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
           line: 7,
-          column: 14,
+          column: 16,
         },
       ],
       output: `
-      const Example = () => {
-        return (
-          <>
-            {0 ? <Something/> : null}
-            {'' ? <Something/> : null}
-            {NaN ? <Something/> : null}
-          </>
-        )
-      }
+        const Example = () => {
+          return (
+            <>
+              {0 ? <Something/> : null}
+              {'' && <Something/>}
+              {NaN ? <Something/> : null}
+            </>
+          )
+        }
       `,
+      settings: { react: { version: '18.0.0' } },
     },
 
     // Invalid tests with both strategies enabled (default)