diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c27654dbf..3a8f732dc3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,9 +18,13 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange * [`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) +### Changed +* [Docs] [`jsx-no-leaked-render`]: Remove mentions of empty strings for React 18 ([#3468][] @karlhorky) + [#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 +[#3468]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3468 [#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/docs/rules/jsx-no-leaked-render.md b/docs/rules/jsx-no-leaked-render.md index 258ea1f2c0..88b74838ab 100644 --- a/docs/rules/jsx-no-leaked-render.md +++ b/docs/rules/jsx-no-leaked-render.md @@ -10,23 +10,23 @@ Using the `&&` operator to render some element conditionally in JSX can cause un This rule aims to prevent dangerous leaked values from being rendered since they can cause unexpected values reaching the final DOM or even crashing your render method. -In React, you might end up rendering unexpected values like `0` or `NaN`. In React Native, your render method will crash if you render `0`, `''`, or `NaN`: +In React, you might end up rendering unexpected values like `0` or `NaN`. In React Native, your render method will even crash if you render these values: ```jsx const Example = () => { return ( <> - {0 && } + {0 && } {/* React: renders undesired 0 */} {/* React Native: crashes 💥 */} - {'' && } - {/* React: renders nothing */} - {/* React Native: crashes 💥 */} - - {NaN && } + {NaN && } {/* React: renders undesired NaN */} {/* React Native: crashes 💥 */} + + {'' && } + {/* React: renders nothing */} + {/* React Native, with React < 18: crashes 💥 */} ) } @@ -55,7 +55,7 @@ const Component = ({ count }) => { ```jsx const Component = ({ elements }) => { - return
{elements.length && }
+ return
{elements.length && }
} ``` @@ -71,13 +71,13 @@ const Component = ({ nestedCollection }) => { ```jsx const Component = ({ elements }) => { - return
{elements[0] && }
+ return
{elements[0] && }
} ``` ```jsx const Component = ({ numberA, numberB }) => { - return
{(numberA || numberB) && {numberA+numberB}}
+ return
{(numberA || numberB) && {numberA + numberB}}
} ``` @@ -85,7 +85,7 @@ const Component = ({ numberA, numberB }) => { // If the condition is a boolean value, this rule will report the logical expression // since it can't infer the type of the condition. const Component = ({ someBool }) => { - return
{someBool && {numberA+numberB}}
+ return
{someBool && {numberA + numberB}}
} ``` @@ -119,31 +119,31 @@ const Component = ({ elements, count }) => { ```jsx const Component = ({ elements }) => { - return
{!!elements.length && }
+ return
{!!elements.length && }
} ``` ```jsx const Component = ({ elements }) => { - return
{Boolean(elements.length) && }
+ return
{Boolean(elements.length) && }
} ``` ```jsx const Component = ({ elements }) => { - return
{elements.length > 0 && }
+ return
{elements.length > 0 && }
} ``` ```jsx const Component = ({ elements }) => { - return
{elements.length ? : null}
+ return
{elements.length ? : null}
} ``` ```jsx const Component = ({ elements }) => { - return
{elements.length ? : }
+ return
{elements.length ? : }
} ```