Decorator

Decorator wraps a component with additional behavior while preserving the same interface—logging, caching, authorization, metrics, retries, or UI enhancement. Composition beats subclass explosion when behaviors combine freely. In TypeScript and React, decorators or wrapper components often implement the same idea with different syntax.

On interviews: compare Decorator with Proxy, middleware, and higher-order functions. Show stacking multiple decorators and order sensitivity.

Common pitfalls: decorators that change contracts subtly; infinite wrapper chains; debugging through many layers without correlation IDs.

The trade-off is flexibility versus complexity—know when the simpler path is enough.

Checklist:

• Wrapped object and decorator share interface.
• Each decorator has one clear responsibility.
• Document ordering when behaviors interact.
• Keep core object testable without decorators.