# react/no-object-type-as-default-prop

> Disallow objects, arrays, and functions as default values of destructured props

A default value in the parameter list is evaluated again on every render. `users = []` creates a new array each time, so the prop never equals its value from the last render. A `useEffect` or `useMemo` that depends on it runs on every render, and a child wrapped in `memo` renders again every time. If the effect sets state, the component renders in a loop.

The rule checks function components that destructure their props in the parameter list. It reports these defaults: an object, an array, a function, a class, a `new` expression, a regular expression, a JSX element, and a call to `Symbol()`. Strings, numbers, booleans, and variables are fine.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"react/no-object-type-as-default-prop" = "error" # or "warn"
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"count": 2} */}
```jsx
function UserList({ users = [], onSelect = () => {} }) {
  return <List items={users} onSelect={onSelect} />;
}
```

Not reported:

{/* good */}
```jsx
const noUsers = [];
const ignore = () => {};

function UserList({ users = noUsers, onSelect = ignore, limit = 10 }) {
  return <List items={users.slice(0, limit)} onSelect={onSelect} />;
}
```

The rule skips a function that isn't a component:

{/* good */}
```jsx
function sortUsers({ users = [] }) {
  return users.toSorted((a, b) => a.name.localeCompare(b.name));
}
```