Interview Answer
A Higher-Order Component (HOC) is a function that takes a React component as input and returns a new enhanced component. It is used to reuse component logic such as authentication, authorization, logging, and loading states across multiple components. The pattern follows HOC(Component) => EnhancedComponent. While HOCs are still used in some libraries, modern React applications often prefer Custom Hooks for sharing logic.
A Higher-Order Component (HOC) is a function that takes a component as input and returns a new enhanced component.
Definition
HOC(Component) => EnhancedComponent
HOCs are used to reuse component logic across multiple components.
Simple Example
Original Component
function User() {
return <h2>User Component</h2>;
}
HOC
function withMessage(WrappedComponent) {
return function EnhancedComponent() {
return (
<>
<h1>Welcome</h1>
<WrappedComponent />
</>
);
};
}
Enhanced Component
const UserWithMessage = withMessage(User);
Usage:
<UserWithMessage />
Output:
Welcome
User Component
Real Example: Authentication HOC
Suppose only logged-in users can access a page.
HOC
function withAuth(Component) {
return function AuthComponent(props) {
const isLoggedIn = true;
if (!isLoggedIn) {
return <h2>Please Login</h2>;
}
return <Component {...props} />;
};
}
Dashboard Component
function Dashboard() {
return <h1>Dashboard</h1>;
}
Wrap Component
export default withAuth(Dashboard);
Output:
Dashboard
If not logged in:
Please Login
Loading HOC Example
function withLoader(Component) {
return function EnhancedComponent(props) {
if (props.loading) {
return <h2>Loading...</h2>;
}
return <Component {...props} />;
};
}
Usage:
const UserList = withLoader(Users);
<UserList loading={true} />
Output:
Loading...
Why Use HOC?
Common reusable logic:
- Authentication
- Authorization
- Logging
- Loading Spinner
- Error Handling
- Analytics Tracking
- Permission Checking
Instead of duplicating code in many components.
HOC vs Normal Component
Normal Component
function User() {
return <h1>User</h1>;
}
HOC
function withAuth(User) {
return function() {
return <User />;
};
}
The HOC receives a component and returns another component.
HOC with Props
function withGreeting(Component) {
return function(props) {
return (
<>
<h1>Hello</h1>
<Component {...props} />
</>
);
};
}
Component:
function User({ name }) {
return <h2>{name}</h2>;
}
Usage:
const EnhancedUser = withGreeting(User);
<EnhancedUser name="Raj" />
Output:
Hello
Raj
HOC vs Custom Hook
Modern React often prefers Custom Hooks over HOCs.
HOC
export default withAuth(Dashboard);
Custom Hook
function useAuth() {
return true;
}
function Dashboard() {
const isLoggedIn = useAuth();
if (!isLoggedIn) {
return <h2>Login Required</h2>;
}
return <h1>Dashboard</h1>;
}
Today, Custom Hooks are generally more popular because they are easier to read and compose.
Famous HOC Examples
Older React libraries used HOCs extensively:
- React Redux →
connect() - React Router (older versions) →
withRouter()
Example:
export default connect(
mapStateToProps,
mapDispatchToProps
)(User);
Interview Answer
A Higher-Order Component (HOC) is a function that takes a React component as input and returns a new enhanced component. It is used to reuse component logic such as authentication, authorization, logging, and loading states across multiple components. The pattern follows
HOC(Component) => EnhancedComponent. While HOCs are still used in some libraries, modern React applications often prefer Custom Hooks for sharing logic.
