noLeakedRender

JSX and TSX

Summary

Rule available since: v2.3.8
Diagnostic Category: lint/nursery/noLeakedRender
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- react
Sources:
- Inspired from react/jsx-no-leaked-render

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noLeakedRender": "error"
6
      }
7
    }
8
  }
9
}

Description

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.

Examples

Invalid

1
const Component = () => {
2
  const count = 0;
3
  return <div>{count && <span>Count: {count}</span>}</div>;
4
}

code-block.jsx:3:16 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Potential leaked value that might cause unintended rendering.
  
    1 │ const Component = () => {
    2 │   const count = 0;
  > 3 │   return <div>{count && <span>Count: {count}</span>}</div>;
      │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 │ }
    5 │ 
  
  ℹ JavaScript’s && operator returns the left value when it’s falsy (e.g., 0, NaN, ”). React will render that value, causing unexpected UI output.
  
  ℹ Make sure the condition is explicitly boolean.Use !!value, value > 0, or a ternary expression.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
const Component = () => {
2
  const items = [];
3
  return <div>{items.length && <List items={items} />}</div>;
4
}

code-block.jsx:3:16 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Potential leaked value that might cause unintended rendering.
  
    1 │ const Component = () => {
    2 │   const items = [];
  > 3 │   return <div>{items.length && <List items={items} />}</div>;
      │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 │ }
    5 │ 
  
  ℹ JavaScript’s && operator returns the left value when it’s falsy (e.g., 0, NaN, ”). React will render that value, causing unexpected UI output.
  
  ℹ Make sure the condition is explicitly boolean.Use !!value, value > 0, or a ternary expression.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
const Component = () => {
2
  const user = null;
3
  return <div>{user && <Profile user={user} />}</div>;
4
}

code-block.jsx:3:16 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Potential leaked value that might cause unintended rendering.
  
    1 │ const Component = () => {
    2 │   const user = null;
  > 3 │   return <div>{user && <Profile user={user} />}</div>;
      │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 │ }
    5 │ 
  
  ℹ JavaScript’s && operator returns the left value when it’s falsy (e.g., 0, NaN, ”). React will render that value, causing unexpected UI output.
  
  ℹ Make sure the condition is explicitly boolean.Use !!value, value > 0, or a ternary expression.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
const Component = () => {
2
  const count = 0;
3
  return <div>{count > 0 && <span>Count: {count}</span>}</div>;
4
}

1
const Component = () => {
2
  const items = [];
3
  return <div>{!!items.length && <List items={items} />}</div>;
4
}

1
const Component = () => {
2
  const user = null;
3
  return <div>{user ? <Profile user={user} /> : null}</div>;
4
}

1
const Component = () => {
2
  const condition = false;
3
  return <div>{condition ? <Content /> : <Fallback />}</div>;
4
}

1
const Component = () => {
2
  const isReady = true;
3
  return <div>{isReady && <Content />}</div>;
4
}