When working with React, you’ll often need to reuse logic across multiple components.
That’s where Higher Order Components (HOC) come into the picture.
In this guide, you’ll learn:
- What a Higher Order Component is
- Why we need it
- How it works
- Multiple real-world examples
- When to use and when to avoid
What is a Higher Order Component (HOC)?
Simple Definition
A Higher Order Component (HOC) is a function that takes a component and returns a new enhanced component.
Syntax
const EnhancedComponent = higherOrderComponent(WrappedComponent);
Simple Example
function withLogger(Component) {
return function EnhancedComponent(props) {
console.log("Component rendered");
return <Component {...props} />;
};
}
👉 Usage:
function Button() {
return <button>Click</button>;
}
const EnhancedButton = withLogger(Button);
Why Do We Need HOC?
Without HOC:
❌ Duplicate logic in multiple components
With HOC:
✅ Reuse logic
✅ Cleaner code
✅ Better maintainability
How HOC Works (Step-by-Step)
- Take a component as input
- Add extra logic
- Return a new component
- Render original component with props
Scenario 1: Logging (Basic Example)
function withLogger(Component) {
return function (props) {
console.log("Props:", props);
return <Component {...props} />;
};
}
Scenario 2: Authentication (Very Common)
HOC
function withAuth(Component) {
return function (props) {
const { isLoggedIn } = useContext(AuthContext);
if (!isLoggedIn) {
return <h2>Please Login</h2>;
}
return <Component {...props} />;
};
}
Usage
function Dashboard() {
return <h1>Welcome to Dashboard</h1>;
}
export default withAuth(Dashboard);
Scenario 3: API Data Fetching
HOC
import { useEffect, useState } from "react";
function withData(Component, url) {
return function (props) {
const [data, setData] = useState([]);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(setData);
}, []);
return <Component data={data} {...props} />;
};
}
Usage
function Users({ data }) {
return <div>{data.length} Users</div>;
}
export default withData(Users, "/api/users");
Scenario 4: Loading State
function withLoading(Component) {
return function ({ isLoading, ...props }) {
if (isLoading) return <p>Loading...</p>;
return <Component {...props} />;
};
}
Scenario 5: Reusing Styles
function withStyle(Component) {
return function (props) {
return (
<div style={{ border: "1px solid black", padding: "10px" }}>
<Component {...props} />
</div>
);
};
}
Common Mistakes
❌ Forgetting to pass props
return <Component />; // ❌
👉 Fix:
return <Component {...props} />; // ✅
❌ Mutating original component
👉 Always return a new component
HOC vs Hooks
HOC
- Works with class components
- Reusable logic
Hooks
- Simpler
- Preferred in modern React
When to Use HOC
Use HOC when:
- You need reusable logic
- Working with legacy/class components
- Cross-cutting concerns (auth, logging)
When to Avoid HOC
Avoid when:
- Hooks can solve it easily
- Too many nested HOCs (complexity increases)
🧠 Interview Tip
If asked:
“What is HOC?”
👉 Answer:
“A Higher Order Component is a function that takes a component and returns a new component with added functionality.”
🏁 Final Summary
- HOC = function that enhances components
- Helps reuse logic
- Used for auth, logging, data fetching
- Hooks are modern alternative
🔗 Related Articles
👉 Add these:
- What is DOM, Virtual DOM, and Real DOM in React? (Simple Explanation for Beginners)
- What is React JS? Why is it Efficient? (Beginner-Friendly Guide)
- Controlled vs Uncontrolled Components in React (Beginner Friendly)
💡 Found this helpful? Subscribe for simple React guides, real-world examples, and interview preparation tips. Happy Coding!
