Learn the concept
Advanced Patterns
A Higher-Order Component is a function that takes a component and returns an enhanced component with additional props or behavior; they're less common now because React Hooks provide a cleaner solution for logic reuse without wrapper components.
What is an HOC?
Common Use Cases:
withAuth)withLoading)withData)withTheme)withTracking)Problems with HOCs:
forwardRef (React 19 now passes ref as a regular prop)Why Hooks are Preferred:
When HOCs Still Make Sense:
// HOC that adds loading state
function withLoading(WrappedComponent) {
// Return a new component
return function WithLoadingComponent({ isLoading, ...props }) {
if (isLoading) {
return <div className="spinner">Loading...</div>;
}
return <WrappedComponent {...props} />;
};
}
// Usage
const UserListWithLoading = withLoading(UserList);
function App() {
const [loading, setLoading] = useState(true);
const [users, setUsers] = useState([]);
return (
<UserListWithLoading
isLoading={loading}
users={users}
/>
);
}Wrapping components with authentication, authorization, or analytics tracking via HOCs
Understanding and maintaining HOC-based patterns in older React codebases
Some libraries still expose HOC APIs (e.g., GraphQL clients, form libraries) alongside hooks
Migrate withAuth, withTheme, and withLoading HOCs to useAuth, useTheme, and useLoading hooks
Build a DevTools extension that visualizes HOC wrapper layers around components