Higher-Order Components reuse behavior by moving shared component logic into a wrapper that can enhance multiple different components. A common example is access control. ### Without Reusable Logic Suppose several pages require authentication: ```text Profile Dashboard Settings Orders ``` Each component could repeat: ```jsx if (!user) { return ; } ``` but that spreads the same authorization behavior across many components. ### Creating an Authentication HOC ```jsx function withAuth(WrappedComponent) { return function AuthenticatedComponent(props) { const user = useCurrentUser(); if (!user) { return (

You must sign in to view this page.

); } return ( ); }; } ``` Now different components can reuse it: ```jsx const ProtectedProfile = withAuth(Profile); const ProtectedDashboard = withAuth(Dashboard); const ProtectedSettings = withAuth(Settings); ``` Conceptually: ```text Profile ───────┐ Dashboard ─────┼── withAuth Settings ──────┘ ↓ authentication behavior ``` ### Example: Loading State HOC Another reusable behavior might be loading UI: ```jsx function withLoading(WrappedComponent) { return function WithLoading({ loading, ...props }) { if (loading) { return

; } return ( ); }; } ``` Use it with different components: ```jsx const UserListWithLoading = withLoading(UserList); const ProductListWithLoading = withLoading(ProductList); ``` ### HOCs Can Inject Props A common HOC pattern is adding information to the wrapped component: ```jsx function withPermissions(WrappedComponent) { return function WithPermissions(props) { const permissions = usePermissions(); return ( ); }; } ``` The wrapped component does not need to know where those permissions came from. ### HOCs Can Also Control Rendering An HOC may decide whether the wrapped component should render at all: ```jsx if (!hasPermission) { return ; } return ; ``` So HOCs can be used for both: ```text Injecting data Controlling rendering ``` ### Composition of HOCs Several HOCs can enhance the same component: ```jsx const EnhancedDashboard = withAuth( withLoading(Dashboard) ); ``` Conceptually: ```text Dashboard ↓ withLoading ↓ withAuth ↓ EnhancedDashboard ``` This was a popular way to combine reusable behaviors before [Hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback) became the normal approach in [function](/javascript/functions-in-javascript) components. ### The Tradeoff When too many HOCs are nested: ```text withAuth( withPermissions( withTheme( withLoading(Component) ) ) ) ``` it can become difficult to understand: ```text Where props came from Which wrapper controls rendering Which wrapper owns state Why a component rendered ``` This is one reason [Hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback) are often easier for reusable logic in modern [React](/courses/reactjs). ### Interview-Ready Answer HOCs reuse component behavior by wrapping different components with the same logic. They can inject props, control rendering, manage authentication or permissions, or provide loading behavior. Multiple HOCs can be composed, but heavily nested wrappers can make data flow and component behavior harder to understand.