Interview answer drill

Use this React interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice interview questions Follow 30-day foundations study plan Practice more React interview questions

Higher-order components (HOCs) in React: what are they and when should you use them?Frontend interview answer

LowIntermediateReact

By FrontendAtlas Team · Updated Apr 4, 2026

Interview focus

This React interview question tests whether you can explain Higher-order components in React: legacy reuse, prop-collision pitfalls, and when not to use them, connect it to production trade-offs, and handle common follow-up questions.

Higher-order components in React: legacy reuse, prop-collision pitfalls, and when not to use them explanation without falling back to memorized docs wording
Patterns and Hoc reasoning, edge cases, and production failure modes
How you would answer the most likely React interview follow-up

Practice more React interview questions

Interview quick answer

Explain higher-order components as a legacy React reuse pattern, with focus on wrapper debugging, prop collisions, display names, typing friction, and when hooks are simpler.

Full interview answer

Legacy pattern with real pitfalls

Higher-order components are still worth knowing because many production React codebases and libraries use them. The beyond-basics part is not the definition; it is the wrapper cost: prop collisions, lost display names, awkward typing, and debug stacks that become harder to read. In new code, hooks are often simpler, but HOCs still matter when behavior must wrap a component contract.

Concept	What it means	Why it matters
Input	A component ("WrappedComponent")	The HOC enhances behavior around the same UI contract
Output	A new component ("Enhanced")	You get reuse without copy-pasting logic
How it works	Wrapper renders `<WrappedComponent {...props} />`	Pass-through preserves flexibility and testability
Composition	`withA(withB(Component))`	Order matters; wrappers layer behavior

What a HOC is (and how to reason about it)

JSX

// Minimal HOC: adds logging without changing WrappedComponent
function withLogger(WrappedComponent) {
  function WithLogger(props) {
    console.log('Rendering', WrappedComponent.displayName || WrappedComponent.name || 'Component');
    return <WrappedComponent {...props} />;
  }

  WithLogger.displayName = `withLogger(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
  return WithLogger;
}

function Hello({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export const HelloWithLogger = withLogger(Hello);

Common use cases (where HOCs still show up)

Use case	What the HOC does	Typical examples
Inject props	Adds derived/global props to the wrapped component	`connect()` (Redux), feature flags, theme injection (older patterns)
Access control	Blocks/redirects/returns fallback UI when unauthorized	withAuth / withRoleGuard
Side-effect wiring	Subscribes and cleans up (events, WebSocket connections) around the wrapped component	withSubscription / withWindowListener
Error boundaries	Wraps with an error boundary component	withErrorBoundary (common in codebases without global boundaries)

Real-world places HOCs are used

Hard parts / interview-level gotchas

Gotcha	What can go wrong	Fix / best practice
Ref forwarding	Refs don’t automatically pass through wrappers	Use `React.forwardRef` and pass `ref` down
Static methods lost	Statics on the wrapped component (e.g., `someStatic`) aren’t present on the wrapper	Hoist statics (e.g., `hoist-non-react-statics`) when needed
Prop clobbering	HOC injects a prop name that collides with caller props	Namespace injected props or document the contract clearly
Wrapper noise	DevTools shows extra wrapper layers (“wrapper hell”)	Set `displayName`; prefer hooks for new code
Order sensitivity	`withA(withB(X))` vs `withB(withA(X))` can change behavior	Be intentional; document composition order
Creating HOCs in render	New component type each render → remounts/state loss/perf issues	Create HOCs once (module scope) or memoize carefully

The parts that make HOCs “hard” in practice

JSX

import React from 'react';

// HOC that forwards refs + sets displayName
function withFocusRing(WrappedComponent) {
  const WithFocusRing = React.forwardRef(function WithFocusRing(props, ref) {
    return (
      <div data-focus-ring>
        <WrappedComponent ref={ref} {...props} />
      </div>
    );
  });

  WithFocusRing.displayName = `withFocusRing(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
  return WithFocusRing;
}

Modern guidance

In modern React, custom hooks are usually the first choice for reusing stateful logic because they avoid wrapper nesting and compose more cleanly. HOCs still matter for legacy code, class components, and library APIs built around wrapping (e.g., Redux connect in older setups).

Summary
An HOC is a function: `(WrappedComponent) => EnhancedComponent`.
Prefer custom hooks for new logic reuse; HOCs mostly show up in legacy code and library APIs (e.g., older Redux `connect`).
Key gotchas: prop collisions, ref forwarding (`forwardRef`), hoisting statics, and wrapper nesting ("wrapper hell").

Summary

Practical scenario
Wrap components with an auth HOC that injects user info and guards rendering.

Common pitfalls

Prop name collisions between HOC and wrapped component.
Losing static methods or display names.
Over-nesting HOCs and reducing readability.

Trade-off or test tip
HOCs are powerful but add indirection. Test prop passing and component names in DevTools.