# react/no-multi-comp

> Disallow more than one React component in a file

With one component per file, you can find any component by its file name, and a change to one doesn't show up in another's history.

The rule accepts the first component in the file and reports every component after it.

{/* 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-multi-comp" = "error" # or "warn"
```

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"react/no-multi-comp" = ["error", {
  ignoreStateless = false,
}]
```

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

## Examples

Reported:

{/* bad {"count": 1} */}
```jsx
function Avatar({ user }) {
  return <img src={user.photo} alt={user.name} />;
}

function Profile({ user }) {
  return <Avatar user={user} />;
}
```

Not reported:

{/* good */}
```jsx
import { Avatar } from "./Avatar";

export function Profile({ user }) {
  return <Avatar user={user} />;
}
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `ignoreStateless` | `false` | Don't count function components, or components wrapped in `memo` or `forwardRef`. Only class components and `createReactClass` count. |

With `ignoreStateless`, a class component can have small function components next to it:

{/* good {"options": [{"ignoreStateless": true}]} */}
```jsx
function Avatar({ user }) {
  return <img src={user.photo} alt={user.name} />;
}

class Profile extends React.Component {
  render() {
    return <Avatar user={this.props.user} />;
  }
}
```

## When not to use it

Small helper components that only one component uses often read better in the same file. Leave the rule off, or turn on `ignoreStateless`.