no-complex-conditional-rendering
Rule category
Complexity.
What it does
Warns when conditional rendering is too complex.
Examples
Failing
function Example({ condition1, condition2, condition3, condition4 }) {
return <div>{condition1 || condition2 ? <div>X</div> : condition3 || condition4 ? <div>Y</div> : null}</div>;
}Passing
function Example({ condition1, condition2, condition3, condition4 }) {
const shouldDisplayX = condition1 || condition2;
const shouldDisplayY = condition3 || condition4;
return (
<div>
{shouldDisplayX && <div>X</div>}
{shouldDisplayY && <div>Y</div>}
</div>
);
}