HOCs are a powerful pattern for reusing component logic. They take a component and return a new component with additional functionality.
- Reusable logic across components
- Props manipulation and injection
- Conditional rendering patterns
- Authentication and authorization wrappers
const withAuth = (Component) => {
return function AuthenticatedComponent(props) {
const { user } = useAuth();
if (!user) {
return <LoginPrompt />;
}
return <Component {...props} user={user} />;
};
};
const ProtectedDashboard = withAuth(Dashboard);