Component Rules

Rules that govern how React component files are written. Every rule is enabled by the recommended config and applies to .jsx / .tsx files inside a /components/ folder of your project.

component-naming-convention

Require component default export names to start with an uppercase letter and match the file name.

export default function ProfileCard() {
  return <section>Profile</section>
}

export default function profileCard() {
  return <section>Profile</section>
}

The rule flags two distinct problems:

• The default export name does not start with an uppercase letter.
• The default export name does not match the file name (excluding extension).

export default function MatchName() {
  return <section>Match</section>
}

export default function DifferentName() {
  return <section>Mismatch</section>
}

component-one-per-file

Require component files to contain only one component.

export default function MainWidget() {
  return <div>Main</div>
}

function MainWidget() {
  return <div>Main</div>
}

function SecondaryWidget() {
return <div>Secondary</div>
}

export default MainWidget

If you have a second component in the same file, move it to its own file under src/components/.

component-require-default-export

Require component files to have a default export.

export default function UserBadge() {
  return <span>Badge</span>
}

export function UserBadge() {
  return <span>Badge</span>
}

Components in /components/ must be default-exported so they can be imported with a clean, locally-controlled name and so tree-shaking and lazy loading behave predictably.

component-default-export-function-declaration

Require default exports in component files to be function declarations.

function OrderSummary() {
  return <div>Summary</div>
}

export default OrderSummary

const ArrowDefault = () => {
  return <div>Arrow</div>
}

export default ArrowDefault

Inline default-exported arrow functions are also rejected:

// No component name attached to the default export
export default () => {
  return <div>Inline</div>
}

Function declarations are hoisted, have an explicit name (which is great for stack traces and React DevTools), and are the convention the rest of this rule pack relies on — for example, component-props-interface looks up the component by its declaration name.

component-props-interface

Require component files to define a local, non-exported interface Props at the top of the file.

interface Props {
  name: string
}

export default function GreetingCard({ name }: Props) {
  return <h1>{name}</h1>
}

export interface Props {
  label: string
}

export default function ExportedPropsExample({ label }: Props) {
  return <p>{label}</p>
}

The rule enforces all of the following at once:

• A Props interface must be declared locally in the file.
• It must be declared with interface, not a type alias.
• It must not be exported.
• It must be declared before the component's default export.
• It must be named exactly Props — no other interface declarations are allowed in component files.

// Use `interface Props`, not `type Props`
type Props = {
  value: number
}

export default function AliasPropsExample({ value }: Props) {
  return <p>{value}</p>
}