A curated collection of JavaScript and React design patterns with clear explanations and practical implementations.
Each pattern includes: Problem → When to Use → Trade-offs → JS / React Example
- Creational → object creation, factories, configuration
- Structural → composition, API boundaries, reuse
- Behavioral → state, events, async flows
- React Patterns → component architecture, state ownership, performance
Fundamental creational, structural, and behavioral patterns implemented in pure JavaScript.
- Singleton Pattern — Ensure a single shared instance
- Factory Pattern — Delegate object creation to a factory
- Builder Pattern — Step-by-step construction of complex objects
- Prototype Pattern — Create objects by cloning existing ones
- Module Pattern — Encapsulate private state with a public API
- Revealing Module Pattern — Explicitly define public/private members
- Decorator Pattern — Add behavior dynamically without inheritance
- Adapter Pattern — Convert incompatible interfaces
- Facade Pattern — Simplify access to complex subsystems
- Proxy Pattern — Control access to an object
- Flyweight Pattern — Share state to reduce memory usage
- Strategy Pattern — Select algorithms at runtime
- State Pattern — Change behavior based on internal state
- Observer Pattern — Notify subscribers of state changes
- Mediator Pattern — Centralize object communication
- Command Pattern — Encapsulate actions for undo/redo
- Iterator Pattern — Traverse collections without exposing internals
- Chain of Responsibility Pattern — Pass requests through a handler chain
- Template Method Pattern — Define an algorithm skeleton with overridable steps
React-specific patterns for scalable, maintainable UI architecture.
React patterns focus on composition and state management, not classical GoF OO class hierarchies.
- Class-based design
- Inheritance + polymorphism
- Encapsulation via objects
- Originally designed for C++ / Java-style OOP
- Singleton
- Factory / Abstract Factory
- Builder
- Prototype
- Adapter
- Decorator
- Facade
- Proxy
- Flyweight
- Bridge
- Composite
- Strategy
- Observer
- State
- Command
- Iterator
- Mediator
- Chain of Responsibility
- Template Method
- Visitor
- Memento
- Interpreter
- GoF patterns ≠ React patterns
- React favors functions + composition, not inheritance
- GoF ideas still apply, but are expressed functionally
- Strategy → function maps / hook selectors
- Observer → events, RxJS, React state updates
- Decorator → HOCs / function composition
- Factory → config-based object or hook creation
- Compound Component Pattern — Implicit coordination via shared parent state
- Slot Pattern — Flexible component composition
- Facade Pattern — Simplified UI APIs
- Provider Pattern — Context-based state sharing
- Container–Presenter Pattern — Separate logic from presentation
- Strategy Pattern — Runtime logic selection
- State Reducer Pattern — Controlled state transitions
- Controlled–Uncontrolled Pattern — Flexible state ownership
- Publish–Subscribe Pattern — Decoupled event flow
- Optimistic Hook Pattern — Instant UI with async reconciliation
- Custom Hook Pattern — Reusable stateful logic
- Higher-Order Component (HOC) Pattern — Wrapper-based reuse
- Render Props Pattern — Function-based reuse
- Performance Pattern — Rendering, memoization, scheduling
- Start with
Design-Patterns/for core concepts - Move to
React-Design-Patterns/for real-world UI architecture
Contributions are welcome! Open a pull request or raise an issue here.