Chain of Responsibility (React)

Why: Chain of Responsibility lets you pass a request (or context) along a chain of handlers. Each handler decides whether to process it and pass to the next, or short-circuit. You avoid one big function with all steps and keep each step in its own function or module (Refactoring.Guru).

Hard constraints: Handlers share a single contract (e.g. handle(context) => result | pass). The chain is an ordered list of handlers; the client runs them in sequence. No single component or function with a long if/else for every step.

When to use

• Validation: Form or field validation (required → format → max length) where you want to add or reorder rules without editing a central validator.
• Contextual help: F1 or help that bubbles from leaf to container (button tooltip → panel → dialog).
• Any sequential pipeline: Event handling, transformation chains, or multi-step UI logic where each handler can process and pass (or stop).

Structure