noLeakedRender

Este conteúdo não está disponível em sua língua ainda.

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/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.

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.

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.

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
}