noReactObjectTypeAsDefaultProp (JavaScript)

Language JavaScript (and super languages)

Summary

Diagnostic Category: lint/nursery/noReactObjectTypeAsDefaultProp
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- react
Sources:
- Same as react/no-object-type-as-default-prop

How to configure

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

Description

Disallow array, object, and function values as default props in React components.

In React, a default prop value like { items = [] } is created every time the component renders. Arrays, objects, and functions are new values each time, even when they look the same. React then thinks the prop changed, so it may re-render the component more than needed, or re-run hooks like useEffect that depends on the prop.

Numbers, strings, and other primitives are fine, because they stay the same among renders.

Examples

Invalid

1
function Component({ items = [] }) {
2
    return items;
3
}

code-block.js:1:30 lint/nursery/noReactObjectTypeAsDefaultProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Every render creates an array literal here.
  
  > 1 │ function Component({ items = [] }) {
      │                              ^^
    2 │     return items;
    3 │ }
  
  ℹ React sees this as a different value each render, so the component may re-render more than needed.
  
  ℹ Move this value to a constant outside the component and use that as the default.
  
  ℹ 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 = ({ config = {} }) => config;

code-block.js:1:31 lint/nursery/noReactObjectTypeAsDefaultProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Every render creates an object literal here.
  
  > 1 │ const Component = ({ config = {} }) => config;
      │                               ^^
    2 │ 
  
  ℹ React sees this as a different value each render, so the component may re-render more than needed.
  
  ℹ Move this value to a constant outside the component and use that as the default.
  
  ℹ 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 EMPTY_ITEMS = [];
2

3
function Component({ items = EMPTY_ITEMS }) {
4
    return items;
5
}

1
function Component({ count = 0, label = "default" }) {
2
    return count;
3
}