[New] jsx-no-leaked-render: add ignoreAttributes option

When true, validation of JSX attribute values is skipped.

Author: aleclarson

CHANGELOG.md

@@ -9,6 +9,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 ### Added
 * [`jsx-props-no-multi-spaces`]: improve autofix for multi-line ([#3930][] @justisb)
 * [`jsx-handler-names`]: support namespaced component names ([#3943][] @takuji)
+* [`jsx-no-leaked-render`]: add `ignoreAttributes` option ([#3441][] @aleclarson)
 
 ### Fixed
 * [`no-unknown-property`]: allow `onLoad` on `body` ([#3923][] @DerekStapleton)
@@ -26,6 +27,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 [#3942]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3942
 [#3930]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3930
 [#3923]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3923
+[#3441]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3441
 
 ## [7.37.5] - 2025.04.03
 

docs/rules/jsx-no-leaked-render.md

@@ -153,6 +153,60 @@ const Component = ({ elements }) => {
 
 The supported options are:
 
+### `ignoreAttributes`
+
+Boolean. When set to `true`, this option ignores all attributes except for `children` during validation, preventing false positives in scenarios where these attributes are used safely or validated internally. Default is `false`.
+
+It can be set like:
+
+```jsonc
+{
+  // ...
+  "react/jsx-no-leaked-render": [<enabled>, { "ignoreAttributes": true }]
+  // ...
+}
+```
+
+Assuming the following options: `{ "ignoreAttributes": true }`
+
+Examples of **incorrect** code for this rule, with the above configuration:
+
+```jsx
+function MyComponent({ value }) {
+  return (
+    <MyChildComponent nonChildrenProp={value && 'default'}>
+      {value && <MyInnerChildComponent />}
+    </MyChildComponent>
+  );
+}
+```
+
+Even with `ignoreAttributes: true`, `children` expressions are still checked. In the example above, `{value && <MyInnerChildComponent />}` will still be flagged.
+
+Nested JSX children within attributes are also still checked:
+
+```jsx
+const Component = ({ enabled }) => {
+  return (
+    <Foo bar={
+      <Something>{enabled && <MuchWow />}</Something>
+    } />
+  )
+}
+```
+
+Here, even though `<Something>…</Something>` is inside an attribute of `<Foo>`, the `{enabled && <MuchWow />}` expression is children of `<Something>`, so it is still flagged.
+
+Examples of **correct** code for this rule, with the above configuration:
+
+```jsx
+const Component = ({ enabled, checked }) => {
+  return <CheckBox checked={enabled && checked} />
+}
+```
+
+With `ignoreAttributes: true`, logical expressions in non-children attributes like `checked` are not flagged.
+
 ### `validStrategies`
 
 An array containing `"coerce"`, `"ternary"`, or both (default: `["ternary", "coerce"]`) - Decide which strategies are considered valid to prevent leaked renders (at least 1 is required). The "coerce" option will transform the conditional of the JSX expression to a boolean. The "ternary" option transforms the binary expression into a ternary expression returning `null` for falsy values. The first option from the array will be the strategy used when autofixing, so the order of the values matters.

lib/rules/jsx-no-leaked-render.js

@@ -55,6 +55,21 @@ function extractExpressionBetweenLogicalAnds(node) {
   );
 }
 
+const stopTypes = {
+  __proto__: null,
+  JSXElement: true,
+  JSXFragment: true,
+};
+
+function isWithinAttribute(node) {
+  let parent = node.parent;
+  while (!stopTypes[parent.type]) {
+    if (parent.type === 'JSXAttribute') return true;
+    parent = parent.parent;
+  }
+  return false;
+}
+
 function ruleFixer(context, fixStrategy, fixer, reportedNode, leftNode, rightNode) {
   const rightSideText = getText(context, rightNode);
 
@@ -137,6 +152,10 @@ module.exports = {
             uniqueItems: true,
             default: DEFAULT_VALID_STRATEGIES,
           },
+          ignoreAttributes: {
+            type: 'boolean',
+            default: false,
+          },
         },
         additionalProperties: false,
       },
@@ -150,6 +169,9 @@ module.exports = {
 
     return {
       'JSXExpressionContainer > LogicalExpression[operator="&&"]'(node) {
+        if (config.ignoreAttributes && isWithinAttribute(node)) {
+          return;
+        }
         const leftSide = node.left;
 
         const isCoerceValidLeftSide = COERCE_VALID_LEFT_SIDE_EXPRESSIONS
@@ -185,6 +207,9 @@ module.exports = {
         if (validStrategies.has(TERNARY_STRATEGY)) {
           return;
         }
+        if (config.ignoreAttributes && isWithinAttribute(node)) {
+          return;
+        }
 
         const isValidTernaryAlternate = TERNARY_INVALID_ALTERNATE_VALUES.indexOf(node.alternate.value) === -1;
         const isJSXElementAlternate = node.alternate.type === 'JSXElement';

tests/lib/rules/jsx-no-leaked-render.js

@@ -205,6 +205,16 @@ ruleTester.run('jsx-no-leaked-render', rule, {
       `,
       options: [{ validStrategies: ['coerce'] }],
     },
+
+    // See #3292
+    {
+      code: `
+        const Component = ({ enabled, checked }) => {
+          return <CheckBox checked={enabled && checked} />
+        }
+      `,
+      options: [{ ignoreAttributes: true }],
+    },
   ]) || [],
 
   invalid: parsers.all([].concat(
@@ -877,6 +887,25 @@ ruleTester.run('jsx-no-leaked-render', rule, {
         column: 24,
       }],
     },
+
+    // See #3292
+    {
+      code: `
+        const Component = ({ enabled, checked }) => {
+          return <CheckBox checked={enabled && checked} />
+        }
+      `,
+      output: `
+        const Component = ({ enabled, checked }) => {
+          return <CheckBox checked={enabled ? checked : null} />
+        }
+      `,
+      errors: [{
+        message: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
+        line: 3,
+        column: 37,
+      }],
+    },
     {
       code: `
         const MyComponent = () => {
@@ -1002,6 +1031,32 @@ ruleTester.run('jsx-no-leaked-render', rule, {
         line: 4,
         column: 33,
       }],
+    },
+    {
+      code: `
+        const Component = ({ enabled }) => {
+          return (
+            <Foo bar={
+              <Something>{enabled && <MuchWow />}</Something>
+            } />
+          )
+        }
+      `,
+      output: `
+        const Component = ({ enabled }) => {
+          return (
+            <Foo bar={
+              <Something>{enabled ? <MuchWow /> : null}</Something>
+            } />
+          )
+        }
+      `,
+      options: [{ ignoreAttributes: true }],
+      errors: [{
+        message: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
+        line: 5,
+        column: 27,
+      }],
     }
   )),
 });