What are Higher-Order Components (HOC) in React?
Learn what Higher-Order Components (HOCs) are in React, how they reuse logic by wrapping components, real examples like connect, and how they compare to Hooks.
Expected Interview Answer
A Higher-Order Component (HOC) is a function that takes a component and returns a new component with added behaviour, letting you reuse logic across many components without repeating it.
HOCs are a pattern, not a React API, inspired by higher-order functions. The wrapper injects props, data, or behaviour (such as authentication checks, data fetching, or logging) and then renders the original component with those extras. Classic examples include connect from Redux and withRouter. Modern React often replaces many HOCs with custom Hooks, but HOCs remain useful for cross-cutting concerns and for wrapping components you do not control.
- Reuses cross-cutting logic without duplicating code
- Keeps the wrapped component focused on presentation
- Composes multiple behaviours by nesting wrappers
- Works with components you cannot modify directly
- Encourages separation of concerns
AI Mentor Explanation
Think of a batter putting on pads, gloves and a helmet before walking out. The player is the same, but the protective gear adds capabilities without changing who they are. A HOC is that gear: it wraps your component, layering on new powers like protection or data, and hands back a fully kitted-out version ready to play.
Step-by-Step Explanation
Step 1
Write a function
Define a function that accepts a component as its argument, conventionally named withSomething.
Step 2
Create a wrapper component
Inside, define a new component that holds the shared logic, state, or data fetching.
Step 3
Render the original
Return the wrapped component, spreading through props and injecting the extra props it needs.
Step 4
Return the enhanced component
The function returns this new component so it can be used exactly like the original.
Step 5
Preserve identity
Forward refs and set a displayName so DevTools and refs keep working correctly.
What Interviewer Expects
- Defines a HOC as a function returning a component
- Gives real examples like connect or withRouter
- Explains prop injection and composition
- Knows the difference between HOCs and custom Hooks
- Mentions pitfalls like prop collisions and ref forwarding
Common Mistakes
- Calling a HOC a built-in React API rather than a pattern
- Mutating the passed component instead of composing a new one
- Forgetting to spread props through to the wrapped component
- Not forwarding refs, breaking parent access to the DOM node
- Creating the HOC inside render, remounting on every render
Best Answer (HR Friendly)
“A Higher-Order Component is a reusable wrapper in React that adds extra abilities to another component without changing it. It is like putting a phone in a case that adds protection and features while the phone itself stays the same.”
Code Example
import { useEffect, useState } from 'react'
function withLoading(WrappedComponent, fetchData) {
return function WithLoading(props) {
const [data, setData] = useState(null)
useEffect(() => {
fetchData().then(setData)
}, [])
if (data === null) return <p>Loading...</p>
return <WrappedComponent {...props} data={data} />
}
}
// Usage
const UserListWithData = withLoading(UserList, fetchUsers)Follow-up Questions
- How do HOCs compare with custom Hooks for reusing logic?
- What is prop collision in a HOC and how do you avoid it?
- Why is forwarding refs important when writing a HOC?
- Can you compose multiple HOCs together, and how?
- What problems does the wrapper hell caused by HOCs create?
MCQ Practice
1. What is a Higher-Order Component?
A HOC is a function that receives a component and returns an enhanced component; it is a pattern, not a React API.
2. Which of these is a real-world HOC example?
Redux's connect wraps a component and injects state and dispatch props, making it a classic HOC.
3. Why should you forward refs in a HOC?
Without ref forwarding, the ref points at the wrapper, so parents lose access to the underlying component's node.
Flash Cards
What is a HOC? — A function that takes a component and returns a new component with added behaviour.
Is HOC a React API? — No, it is a composition pattern built from higher-order functions.
Common HOC examples? — connect from Redux and withRouter from React Router.
Modern alternative? — Custom Hooks often replace HOCs for sharing stateful logic.