Both HOCs and custom hooks are patterns for reusing logic in React, but they solve slightly different problems.
✅ Higher Order Components (HOCs)
🔹 What is an HOC?
An HOC is a function that:
- Takes a component
- Returns an enhanced component
const withAuth = (WrappedComponent) => {
return function Enhanced(props) {
if (!props.isAuth) return <Login />;
return <WrappedComponent {...props} />;
};
};
🧠 When Should You Use HOCs?
✔ You need to wrap UI behavior
✔ You want to inject props into a component
✔ You want to control rendering (show/hide components)
✔ Working with class components
✔ Implementing cross-cutting concerns
Common HOC Use Cases:
- Authentication / authorization
- Logging
- Error boundaries
- Theming
❌ Downsides of HOCs
- Wrapper hell
- Harder debugging
- Props collision
- Less readable JSX
✅ Custom Hooks
🔹 What is a Custom Hook?
A custom hook is a function that:
- Uses React hooks
- Shares logic only, not UI
function useAuth() {
const [isAuth, setIsAuth] = useState(false);
return isAuth;
}
🧠 When Should You Use Custom Hooks?
✔ You want to reuse stateful logic
✔ Logic does not affect UI structure
✔ Functional components only
✔ Cleaner and simpler abstraction
✔ Modern React applications
Common Hook Use Cases:
- Data fetching
- Form handling
- Debouncing / throttling
- Subscriptions
🔥 Side-by-Side Comparison
| Feature | HOC | Custom Hook |
|---|---|---|
| Reuses | UI + logic | Logic only |
| Affects JSX tree | ✔ Yes | ❌ No |
| Works with classes | ✔ Yes | ❌ No |
| Readability | ❌ Lower | ✔ Higher |
| Nesting | High | None |
| Modern React | ❌ Legacy | ✔ Preferred |
🧠 Rule of Thumb
If you need to wrap or modify UI, use an HOC.
If you only need to reuse logic, use a custom hook.
🎯 Short Interview Answer
Higher Order Components are used when you need to wrap components to add UI behavior or inject props, especially in class components.
Custom hooks are preferred in modern React when you only need to reuse stateful logic in functional components without affecting the component tree.
⭐ One-Line Summary
HOCs change what is rendered; custom hooks change how logic is reused.
