Observer Pattern
A behavioral design pattern where an object (subject) maintains a list of dependents (observers) and notifies them automatically of state changes.
Description
The Observer pattern defines a one-to-many dependency between objects so that when one object (the subject or observable) changes state, all registered dependents (observers or listeners) are notified and updated automatically. This is one of the original Gang of Four design patterns and is foundational to event-driven programming. The subject maintains a list of observers and exposes methods to subscribe, unsubscribe, and notify. When a state change occurs, the subject iterates through its observer list and calls each observer's update method.
In practice, the Observer pattern is ubiquitous in modern software. DOM event listeners (addEventListener/removeEventListener) are a direct implementation. React's useState and useEffect hooks implement observer-like behavior where components re-render when observed state changes. RxJS Observables extend the pattern with powerful operators for filtering, mapping, combining, and debouncing event streams. MobX automates observation through transparent reactive programming, tracking which observables each computed value or reaction depends on.
The Observer pattern is powerful but requires careful lifecycle management. Memory leaks are the most common pitfall: if observers are not unsubscribed when no longer needed, the subject holds references that prevent garbage collection. In React, this manifests as the need for cleanup functions in useEffect. In Angular, RxJS subscriptions must be unsubscribed in ngOnDestroy or managed via the async pipe. The pattern can also create performance issues if a subject has many observers or triggers cascading notifications.
Prompt Snippet
Implement a reactive store using the Observer pattern with a TypeScript generic Observable<T> class that supports subscribe(callback), unsubscribe(callback), and a next(value) method that synchronously notifies all subscribers. Add a select(selector) method that returns a derived Observable which only emits when the selected slice changes using shallow equality comparison. Ensure all subscriptions return an unsubscribe function for cleanup, and integrate with React via a useObservable(observable$) hook that subscribes on mount and cleans up via the useEffect teardown.
Tags
Related Terms
Pub/Sub Pattern
A messaging pattern where publishers emit events to a message broker without knowledge of subscribers, enabling loose coupling between components.
Event-Driven Architecture
An architectural style where the flow of the program is determined by events—state changes that are produced, detected, consumed, and reacted to by loosely coupled services.
State Machine Design
A modeling technique where system behavior is defined as a finite set of states with explicit transitions triggered by events, eliminating impossible states by design.
Redux / Global State Patterns
A predictable state container pattern where all application state lives in a single store, updated exclusively through dispatched actions processed by pure reducer functions.