React Higher Order Components (HOC) — Complete Interview Guide

The Pattern

A HOC is a function: it accepts a component as an argument and returns a new component that wraps it with additional logic. The naming convention is to prefix with with:

// HOC that redirects unauthenticated users
function withAuth(WrappedComponent) {
  return function AuthGuard(props) {
    const { user, loading } = useAuth();

    if (loading) return <Spinner />;
    if (!user)   return <Navigate to="/login" />;

    return <WrappedComponent {...props} />;
  };
}

// Usage
const ProtectedDashboard = withAuth(Dashboard);

// ProtectedDashboard behaves exactly like Dashboard, but checks auth first
<ProtectedDashboard userId={123} />

The Three Conventions You Must Follow

1. Pass through all props

// ❌ Breaks the wrapped component — props are swallowed
return <WrappedComponent />;

// ✅ Always spread props through so the wrapped component gets everything
return <WrappedComponent {...props} />;

2. Set a displayName for debugging

function withAuth(WrappedComponent) {
  function AuthGuard(props) { ... }

  // React DevTools will show "withAuth(Dashboard)" instead of "AuthGuard"
  AuthGuard.displayName = `withAuth(${WrappedComponent.displayName ?? WrappedComponent.name})`;

  return AuthGuard;
}

3. Forward refs

HOCs break ref forwarding by default — a ref on a HOC-wrapped component points to the HOC wrapper, not to the underlying component's DOM node. Fix this with React.forwardRef:

function withLogging(WrappedComponent) {
  const WithLogging = React.forwardRef((props, ref) => {
    logRender(WrappedComponent.name);
    return <WrappedComponent {...props} ref={ref} />;
  });
  WithLogging.displayName = `withLogging(${WrappedComponent.name})`;
  return WithLogging;
}

Composing Multiple HOCs

HOCs compose by nesting function calls — but deep nesting creates "wrapper hell" and makes debugging painful:

// Hard to read and debug — which HOC caused the bug?
const EnhancedComponent = withRouter(withAuth(withAnalytics(withTheme(Dashboard))));

// Use a compose utility (from Redux or Ramda) to flatten the nesting
const enhance = compose(withRouter, withAuth, withAnalytics, withTheme);
const EnhancedComponent = enhance(Dashboard);

Even with compose, HOC-wrapped components are hard to see in React DevTools because each HOC adds a layer to the component tree.

The Problems With HOCs

• Prop naming collisions — if two HOCs inject a prop with the same name, one silently overwrites the other. Debugging this is painful.
• Wrapper hell — composing 4–5 HOCs produces deeply nested DevTools trees that hide the component you actually care about.
• Opaque data flow — it's not clear from the component definition which props came from HOCs vs were passed by the parent.
• Ref forwarding complexity — every HOC must explicitly forward refs or they get lost, and this is easy to forget.

HOC vs Custom Hook — The Modern Choice

Custom hooks solve most of what HOCs were used for — without the component nesting, prop collision, or ref forwarding complexity:

// HOC approach — adds a component layer, injects props
const ProtectedDashboard = withAuth(Dashboard);

// Custom hook approach — logic lives inside the component, no wrapping
function Dashboard() {
  const { user, loading } = useAuth(); // same logic, no wrapper
  if (loading) return <Spinner />;
  if (!user) return <Navigate to="/login" />;
  return <DashboardContent />;
}

Hooks compose naturally, don't add tree depth, can't collide on prop names, and are visible in the component's own code. For new code, prefer custom hooks over HOCs.

When HOCs Are Still the Right Choice

• Class components — hooks don't work in class components. HOCs remain the only way to inject hook-based logic into a class component you can't convert.
• Existing HOC-heavy codebases — if your codebase heavily uses connect() from Redux v4, withRouter, etc., HOCs are already the established pattern.
• Third-party library APIs — some libraries still export HOCs as their primary API. Understanding HOCs is required to use them correctly.
• React.memo — technically a HOC; wrapping a component in React.memo to control re-renders is a HOC usage that still makes sense.