React Design Patterns
ExpertHOC, Render Props, Compound Components, Container/Presentational, Observer, Provider patterns & more
Why Patterns Matter
Design patterns solve recurring problems in maintainable, reusable, and testable ways. At the staff engineer level, choosing the right pattern — and knowing when NOT to use a pattern — is what separates great component APIs from confusing ones.1. Higher-Order Components (HOC)
intermediateA function that takes a component and returns an enhanced component. Classic pattern for cross-cutting concerns like auth, analytics, error handling, loading states.
2. Compound Components
advancedA parent component shares implicit state with children via Context. Consumers compose sub-components rather than configuring a monolithic API.
3. Render Props
intermediatePass a function as a prop that returns JSX. The component provides state/behavior; the consumer controls rendering. Superseded by hooks for logic, still useful for UI inversion.
4. Container / Presentational Pattern
beginnerSeparate data-fetching/business logic (smart containers) from rendering (dumb presentational). Promotes testability and reusability.
5. Provider Pattern & Dependency Injection
advancedUse Context + custom hooks to inject behavior throughout the component tree. Enables swappable implementations (great for testing).
6. Builder & Factory Patterns (TypeScript)
expertBuilder pattern constructs complex objects step-by-step. Factory pattern creates objects without specifying their exact class. Both are essential in form builders, query builders, test data factories.