From c02d4e35e1447b8c40364ed373ca42387193dd9d Mon Sep 17 00:00:00 2001
From: himanshu007-creator <addyjeridiq@gmail.com>
Date: Tue, 15 Nov 2022 03:03:09 +0530
Subject: [PATCH] [Fix] `jsx-no-leaked-render`: Don't report errors on empty
 strings if React >= v18

---
 CHANGELOG.md                            |  2 +
 lib/rules/jsx-no-leaked-render.js       |  4 ++
 tests/lib/rules/jsx-no-leaked-render.js | 82 ++++++++++++++++++-------
 3 files changed, 67 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dde43a8d6d..6c27654dbf 100644
--- 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
index efea6a63c4..618b721baa 100644
--- 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
index 032d8eadfb..c760c8c118 100644
--- 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)