no-complex-conditional-rendering
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
🔍
What it does
Warns when conditional rendering is too complex.
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>
);
}