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)