no-multi-comp

no-multi-comp rule

Prevent multiple component definitions per file. This rule is part of eslint-plugin-react-features.

Quick SummaryCopy Anchor Link

Rule DetailsCopy Anchor Link

Each React component should be in its own file for better maintainability, testing, and code organization. This follows the single responsibility principle.

Why This MattersCopy Anchor Link

ExamplesCopy Anchor Link

❌ IncorrectCopy Anchor Link

// UserComponents.tsx - BAD: Multiple components in one file
function UserAvatar({ src, alt }) {
  return <img src={src} alt={alt} className="avatar" />;
}

function UserName({ name }) {
  return <span className="username">{name}</span>;
}

function UserCard({ user }) {
  return (
    <div className="user-card">
      <UserAvatar src={user.avatar} alt={user.name} />
      <UserName name={user.name} />
    </div>
  );
}

export default UserCard;

✅ CorrectCopy Anchor Link

// UserCard.tsx — one component; helpers that are not components are fine
function renderBadge(role: string) {
  return <span className="badge">{role}</span>;
}

export default function UserCard({ user }) {
  return (
    <div className="user-card">
      {user.name} {renderBadge(user.role)}
    </div>
  );
}

A component, as React defines one: a class that extends React's Component / PureComponent, a function whose name starts with a capital letter and that returns JSX, or a function passed to React's memo / forwardRef. A lowercase render helper or a PascalCase function that returns no JSX is not a component. Every component after the first is reported; with ignoreStateless: true, only class components count.

OptionsCopy Anchor Link

Configuration with OptionsCopy Anchor Link

{
  rules: {
    'react-features/no-multi-comp': ['warn', {
      ignoreStateless: true  // Allow small helper components
    }]
  }
}

Configuration ExamplesCopy Anchor Link

Basic UsageCopy Anchor Link

{
  rules: {
    'react-features/no-multi-comp': 'warn'
  }
}

Strict UsageCopy Anchor Link

{
  rules: {
    'react-features/no-multi-comp': 'error'
  }
}

Related RulesCopy Anchor Link

• no-anonymous-default-export - Named exports
• filename-case - File naming conventions

Further ReadingCopy Anchor Link

• Thinking in React - Component organization
• Single Responsibility - Design principle

Known False NegativesCopy Anchor Link

• Components made by other higher-order functions: styled.div, connect(...)(View) or a custom withX(() => <div />) are not counted; only memo / forwardRef (by binding), PascalCase functions that return JSX, and classes that extend React's Component / PureComponent are.
• A component that returns JSX only through a helper call (function Card() { return renderCard(); }) is not recognised.

Use this rule

npm install -D oxlint-plugin-react-features

{  "jsPlugins": ["oxlint-plugin-react-features"],  "rules": {    "react-features/no-multi-comp": "error"  }}

import { defineConfig } from 'vite-plus';export default defineConfig({  lint: {    jsPlugins: ['oxlint-plugin-react-features'],    rules: {      'react-features/no-multi-comp': 'error',    },  },});