Detailed explanation
A higher-order component (HOC) is a function that accepts a React component and returns another component with additional behaviour. Its usual shape is withFeature(WrappedComponent), producing an EnhancedComponent. HOCs are a composition pattern, not a special React API: they reuse logic by wrapping components rather than changing their implementation. Common applications include authentication gates, permission checks, logging, and injecting data from an external store. This matters when several unrelated components need the same cross-cutting behaviour without duplicating its implementation.
In the example, withAuth(Comp) returns a wrapper component. When React renders that wrapper, useAuth() reads the current authentication state. If a user exists, the wrapper renders Comp and forwards its props; otherwise, it renders Login. The hook is called unconditionally during the wrapper's render, so the conditional JSX does not violate the Rules of Hooks. However, naming the returned function, for example AuthenticatedComponent, makes its role clearer and helps tooling recognise it as a component. A production wrapper should distinguish an unresolved authentication state from a confirmed logged-out state to avoid briefly showing the wrong screen. Client-side gating is a user-experience measure, not a substitute for server-side authorisation.
Under the hood, the returned component creates an additional boundary in the React tree. It can manage state, use hooks, subscribe through effects, and pass derived values to the wrapped component. It should preserve unrelated incoming props and define how injected props interact with caller-provided values. Create the enhanced component outside rendering, normally at module scope: invoking the HOC during every render creates a new component type, which can cause remounts and lost state. Static properties are not automatically copied, and ref handling needs explicit attention, especially with React 18 and earlier.
Custom hooks now handle many logic-sharing cases with less wrapper nesting and more explicit data flow. They do not replace every HOC use case: a wrapper can still conveniently enforce rendering behaviour or support an existing library API. Interviewers usually expect the function-in/component-out definition, a practical example, and awareness of composition pitfalls rather than a claim that HOCs are obsolete.
Key points to remember
- An HOC takes a component and returns an enhanced component without mutating the original.
- Typical uses include authentication gates, permissions, logging, and data injection.
- Forward unrelated props and make injected-prop precedence explicit.
- Create enhanced components outside render to preserve stable component identity.
- Custom hooks reduce the need for HOCs, but wrappers remain useful for rendering policies and existing APIs.
Common mistakes candidates make
- Calling an HOC inside render, creating a new component type and potentially resetting child state.
- Dropping incoming props or accidentally overriding them with injected props.
- Assuming a client-side authentication HOC protects backend data without server-side authorisation.
Likely follow-up questions
How do HOCs differ from custom hooks?
An HOC returns a component and adds behaviour through a wrapper; a custom hook returns values or functions that a component uses directly. Hooks usually make dependencies clearer, while HOCs can centralise conditional rendering.
Can an HOC use hooks internally?
Yes, its returned function component can call hooks at the top level during rendering. The HOC factory itself must not call hooks when it is invoked to create the enhanced component.
What happens to refs and static properties when wrapping a component?
Static properties are not automatically copied to the wrapper, so they require explicit copying or a utility such as hoist-non-react-statics. In React 18 and earlier, forwarding a ref through a function wrapper requires React.forwardRef; React 19 supports receiving ref as a prop, but the wrapper must still pass it onward appropriately.
Interview tip: Start with the function-in/component-out definition, walk through withAuth, then mention stable identity and how custom hooks compare.