Skip to main content

React Components – One FC per File

Enforce one top-level React functional component per file

Source: .agents/rules/react-one-fc-per-file.mdc

Metadata​

  • globs: **/*.tsx
  • alwaysApply: false

Content​

React Components – One FC per File

  • One top-level React functional component per file.
    • Extract additional components into their own files when they are more than a trivial inline fragment.
    • Prefer colocating related components in the same folder rather than the same file.
  • Allowed exceptions:
    • Tiny presentational helpers that are not exported and are clearly scoped to a single parent component (e.g. icon wrappers, tiny layout fragments).
    • Storybook stories or test files where multiple variants/components in one file are expected.
// ❌ Avoid
const Parent = () => { /* ... */ };
const Child = () => { /* ... */ };
export { Parent, Child };

// ✅ Prefer
// Parent.tsx
const Parent = () => { /* ... */ };
export default Parent;

// Child.tsx
const Child = () => { /* ... */ };
export default Child;