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 && }
- {'' && }
- {NaN && }
- >
- )
- }
+ const Example = () => {
+ return (
+ <>
+ {0 && }
+ {'' && }
+ {NaN && }
+ >
+ )
+ }
`,
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 ? : null}
+ {'' ? : null}
+ {NaN ? : null}
+ >
+ )
+ }
+ `,
+ settings: { react: { version: '17.999.999' } },
+ },
+
+ {
+ code: `
+ const Example = () => {
+ return (
+ <>
+ {0 && }
+ {'' && }
+ {NaN && }
+ >
+ )
+ }
+ `,
+ 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 ? : null}
- {'' ? : null}
- {NaN ? : null}
- >
- )
- }
+ const Example = () => {
+ return (
+ <>
+ {0 ? : null}
+ {'' && }
+ {NaN ? : null}
+ >
+ )
+ }
`,
+ settings: { react: { version: '18.0.0' } },
},
// Invalid tests with both strategies enabled (default)