Strategy Pattern (React)

Why: Strategy lets you define a family of algorithms, put each in a separate module or object, and make them interchangeable so the component or hook that uses them stays stable while behavior is swapped at runtime (Refactoring.Guru).

Hard constraints: The consumer (component or hook) must depend only on a strategy type/interface, not concrete implementations. Use composition (strategy passed as prop or from state); avoid inheritance and avoid large switch/if chains in components. Keep strategies pure and testable outside React.

When to use

• Different variants of the same behavior (e.g. sort order, export format, validation rules, date formatting) and the user can switch at runtime (dropdown, toggle, route).
• A component is bloated with conditionals (e.g. if (view === 'card') return <CardView />; else if (view === 'table') ...); extract each variant into a strategy or strategy component.
• You need to add new behaviors without changing the consuming component (Open/Closed).

Structure