React Component Patterns

Overview

Reference guide for idiomatic React + TypeScript component design. Apply these patterns when building, reviewing, or refactoring React components to ensure type safety, composability, and performance.

Composition Over Inheritance

Always compose components rather than extending them. React has no use case for class inheritance beyond React.Component itself.

// GOOD: Composition via props and children
type CardProps = {
  children: React.ReactNode;
  variant?: "elevated" | "outlined";
};