react/no-multi-comp

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.

Configure

Off by default. To turn it on:

[lint.rules]
"react/no-multi-comp" = "error" # or "warn"

Every option, set to its default:

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

Examples

Reported:

function Avatar({ user }) {
  return <img src={user.photo} alt={user.name} />;
}

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

Not reported:

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:

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.