React Component Patterns

React Component Patterns

When to use this skill

Use this skill when you’re building or refactoring React components in a production app and want consistent patterns for typing, composition, state, and performance without introducing premature abstraction.

Core patterns

Functional components only

• Prefer function components with named exports.
• Keep props explicit and stable (avoid ...rest unless you’re building a wrapper that truly forwards).

Example:

export interface ButtonProps {
  variant?: "primary" | "secondary";
  disabled?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}

export function Button({ variant = "primary", disabled, onClick, children }: ButtonProps) {
  return (
    <button data-variant={variant} disabled={disabled} onClick={onClick}>
      {children}
    </button>
  );
}

Prop typing with interfaces (and when to use type)

• Use interface for public component props (extends well, readable in IDEs).
• Use type for unions, helpers, and composition.
• Prefer narrow props over “god props”.

Patterns:

• interface XProps { ... }
• type Variant = "a" | "b"
• type Props = XProps & { ... } when combining.

Controlled inputs (default for forms)

Controlled inputs make state explicit and testable.

Pattern:

• Keep the source of truth in parent.
• Child receives value + onChange(next).

export interface TextFieldProps {
  value: string;
  onChange: (next: string) => void;
  label?: string;
}

export function TextField({ value, onChange, label }: TextFieldProps) {
  return (
    <label>
      {label}
      <input value={value} onChange={(e) => onChange(e.target.value)} />
    </label>
  );
}

Component file structure (predictable + scalable)

For components/Foo/:

• Foo.tsx (component)
• Foo.test.tsx (tests)
• Foo.stories.tsx (storybook if used)
• types.ts (shared types) only if it grows

Avoid:

• gigantic index.ts barrels that hide imports
• “utils.ts dumping ground”