jsx/no-complicated-conditional-rendering
Rule category
Complexity.
What it does
Prevents complicated conditional rendering in JSX.
Why is this bad?
Complicated conditional rendering is hard to read and understand.
Examples
❌ Incorrect
function Component({ hideShapes, debugSvg }) {
return <div>{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}</div>;
}✅ Correct
function Component({ hideShapes, debugSvg }) {
// Early return if nothing to render
if (hideShapes) {
return null;
}
return debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />;
}