Higher-Order Components (HOC)
A Higher-Order Component (HOC) is a React composition pattern: a function that takes a component as input and returns a new, enhanced component. HOCs implement cross-cutting concerns — logic that needs to run across many components — without duplicating code or altering the wrapped component itself.
The pattern mirrors the higher-order functions in functional programming (map, filter): just as those take and return functions, HOCs take and return components.
HOCs in the burgerApp
withErrorHandling(WrappedComponent, axios)
Location: src/hoc/withErrorHandling/withErrorHandling.js
Wraps any component that makes HTTP calls. It attaches Axios request/response interceptors to catch errors globally and display them in a Modal. The wrapped component is unaware this is happening.
BurgerBuilder ──wrapped by──► withErrorHandling(BurgerBuilder, axios)
withRouter(Component) (from react-router-dom)
Injects history, location, and match props into App, which is not itself a direct child of a <Route>. This gives App programmatic navigation capability without being rendered directly by the router.
Auxilary (Wrapper HOC)
Location: src/hoc/Auxilary/Auxilary.js
A thin wrapper that simply renders props.children. Used as a substitute for React.Fragment in older Babel environments where multiple root elements in JSX weren’t natively supported.
HOC Pattern vs Hooks
In modern React (v16.8+), HOCs have largely been replaced by custom hooks for sharing stateful logic. Custom hooks (e.g. useErrorHandler()) achieve the same goal with less ceremony and easier composition. The burgerApp predates hook-first patterns; it uses HOCs throughout.
See Also
- react — the library this pattern belongs to
- schwarzmuller-2021-react-burger-app — source repo