Rules
no-complex-conditional-rendering
This rule is experimental and may change in the future or be removed. It is not recommended to use it in production code at this time.
Full Name in eslint-plugin-react-x
react-x/no-complex-conditional-renderingFull Name in @eslint-react/eslint-plugin
@eslint-react/no-complex-conditional-renderingFeatures
🧪
Description
Disallow complex conditional rendering in JSX expressions.
Examples
Failing
function MyComponent({ condition1, condition2, condition3, condition4 }) {
return <div>{condition1 || condition2 ? <div>X</div> : condition3 || condition4 ? <div>Y</div> : null}</div>;
}Passing
function MyComponent({ condition1, condition2, condition3, condition4 }) {
const shouldDisplayX = condition1 || condition2;
const shouldDisplayY = condition3 || condition4;
return (
<div>
{shouldDisplayX && <div>X</div>}
{shouldDisplayY && <div>Y</div>}
</div>
);
}Implementation
See Also
no-leaked-conditional-rendering
Prevents problematic leaked values from being rendered.