What are Higher-Order Components (HOC)?

Question

Accepted Answer

A Higher-Order Component (HOC) is a function that takes a component and returns a new component , wrapping it with extra behavior. A pattern for sharing reusable logic across multiple components. Common uses — auth gates ( withAuth ), connect Redux state ( connect ), feature flags, theming, logging. Pure function — doesn't mutate the input component; returns a new wrapped one. Pass-through props — spread ...props so the wrapped component receives everything plus the new behavior. Naming convention — prefix with with ( withRouter , withTheme ) so the pattern is recognizable. Modern alternative — custom hooks are usually clearer; HOCs survive in legacy code and a few libraries (Redux connect , react-router v5). Drawback — can create deep wrapper trees that are hard to debug. Know the HOC pattern and its conventions (with* naming, prop passing). But also mention that custom Hooks are the modern alternative. Showing both and explaining when each is appropriate demonstrates evolution awareness.