Rules
no-leaked-conditional-rendering
Prevents problematic leaked values from being rendered.
Full Name in eslint-plugin-react-x
react-x/no-leaked-conditional-renderingFull Name in @eslint-react/eslint-plugin
@eslint-react/no-leaked-conditional-renderingFeatures
💭
Presets
recommended-type-checked
strict-type-checked
Rule Details
Using the && operator to render an element conditionally in JSX can cause unexpected values to be rendered or even crash the rendering.
Common Violations
Invalid
interface MyComponentProps {
count: number;
}
function MyComponent({ count }: MyComponentProps) {
return <div>{count && <span>There are {count} results</span>}</div>;
// ^^^ Potential leaked value 'count' that might cause unintentionally rendered values or rendering crashes.
}interface MyComponentProps {
items: string[];
}
function MyComponent({ items }: MyComponentProps) {
return <div>{items.length && <List items={items} />}</div>;
// ^^^ Potential leaked value 'items.length' that might cause unintentionally rendered values or rendering crashes.
}interface MyComponentProps {
items: string[];
}
function MyComponent({ items }: MyComponentProps) {
return <div>{items[0] && <List items={items} />}</div>;
// ^^^ Potential leaked value 'items[0]' that might cause unintentionally rendered values or rendering crashes.
}interface MyComponentProps {
numberA: number;
numberB: number;
}
function MyComponent({ numberA, numberB }: MyComponentProps) {
return (
<div>{(numberA || numberB) && <Results>{numberA + numberB}</Results>}</div>
// ^^^ Potential leaked value '(numberA || numberB)' that might cause unintentionally rendered values or rendering crashes.
);
}Valid
interface MyComponentProps {
items: string[];
}
function MyComponent({ items }: MyComponentProps) {
return <div>{items}</div>;
}interface MyComponentProps {
customTitle: string;
}
const defaultTitle = "Default Title";
// An OR condition is considered valid since it's assumed to be a way to render some fallback if the first value is falsy, not to render something conditionally.
function MyComponent({ customTitle }: MyComponentProps) {
return <div>{customTitle || defaultTitle}</div>;
}interface MyComponentProps {
items: string[];
}
function MyComponent({ items }: MyComponentProps) {
return <div>There are {items.length} items</div>;
}interface MyComponentProps {
items: string[];
count: number;
}
function MyComponent({ items, count }: MyComponentProps) {
return <div>{!count && "No results found"}</div>;
}interface MyComponentProps {
items: string[];
}
function MyComponent({ items }: MyComponentProps) {
return <div>{!!items.length && <List items={items} />}</div>;
}interface MyComponentProps {
items: string[];
}
function MyComponent({ items }: MyComponentProps) {
return <div>{Boolean(items.length) && <List items={items} />}</div>;
}interface MyComponentProps {
items: string[];
}
function MyComponent({ items }: MyComponentProps) {
return <div>{items.length > 0 && <List items={items} />}</div>;
}interface MyComponentProps {
items: string[];
}
function MyComponent({ items }: MyComponentProps) {
return <div>{items.length ? <List items={items} /> : null}</div>;
}interface MyComponentProps {
items: string[];
}
function MyComponent({ items }: MyComponentProps) {
return <div>{items.length ? <List items={items} /> : <EmptyList />}</div>;
}