src/content/docs/linter/rules/no-leaked-render.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.3.8` - Diagnostic Category: [`lint/nursery/noLeakedRender`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - This rule belongs to the following domains: - [`react`](/linter/domains#react) - Sources: - Inspired from [`react/jsx-no-leaked-render`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-leaked-render.md){
"linter": {
"rules": {
"nursery": {
"noLeakedRender": "error"
}
}
}
}
Prevent problematic leaked values from being rendered.
This rule prevents values that might cause unintentionally rendered values
or rendering crashes in React JSX. When using conditional rendering with the
logical AND operator (&&), if the left-hand side evaluates to a falsy value like
0, NaN, or any empty string, these values will be rendered instead of rendering nothing.
const Component = () => {
const count = 0;
return <div>{count && <span>Count: {count}</span>}</div>;
}
const Component = () => {
const items = [];
return <div>{items.length && <List items={items} />}</div>;
}
const Component = () => {
const user = null;
return <div>{user && <Profile user={user} />}</div>;
}
const Component = () => {
const count = 0;
return <div>{count > 0 && <span>Count: {count}</span>}</div>;
}
const Component = () => {
const items = [];
return <div>{!!items.length && <List items={items} />}</div>;
}
const Component = () => {
const user = null;
return <div>{user ? <Profile user={user} /> : null}</div>;
}
const Component = () => {
const condition = false;
return <div>{condition ? <Content /> : <Fallback />}</div>;
}
const Component = () => {
const isReady = true;
return <div>{isReady && <Content />}</div>;
}