Interview · Patterns
HOC
Components that wrap components
A Higher-Order Component is a function that receives a component and returns a new one with additional behavior. It's the logic reuse pattern from the pre-hooks era — today hooks replace it in most cases, but it still appears in legacy code and libraries.
The signature
const Enhanced = withSomething(Component). The HOC adds props, wraps in providers, injects behavior — without the original component knowing it's being wrapped. By convention they're named with a with prefix.
HOC vs Hook
Hooks are simpler and more composable. Use a HOC when you need to wrap the component's JSX tree (error boundaries, providers) or when working with a library that requires them. For pure reusable logic, a custom hook is the modern choice.
Common pitfalls
- 01HOCs lose the original component name in DevTools — always set displayName on the wrapper.
- 02They can create prop collisions if the HOC and the wrapped component have props with the same name.
- 03Multiple HOCs wrapping the same component create a 'wrapper hell' that's hard to debug — hooks are usually cleaner.
Was this helpful?
Sign in to give feedback