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:

bunfig.toml

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

Every option, set to its default:

bunfig.toml

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

Examples#

example.jsx1 problem

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

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

example.jsxNo problems

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:

example.jsxwith { "ignoreStateless": true }No problems

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.