HOCs are a function-as-component pattern: hoc(Component) → EnhancedComponent.

Basic HOC

function withLogger<P extends object>(Component: React.ComponentType<P>) {
  return function Logged(props: P) {
    useEffect(() => {
      console.log('mounted', Component.displayName);
    }, []);
    return <Component {...props} />;
  };
}

const LoggedButton = withLogger(Button);

LoggedButton is a new component that renders Button plus the logging behavior.

Classic uses

Auth gate:

function withAuth<P extends object>(Component: React.ComponentType<P>) {
  return function Guarded(props: P) {
    const { user } = useAuth();
    if (!user) return <Redirect to="/login" />;
    return <Component {...props} />;
  };
}

const ProtectedPage = withAuth(MyPage);

Redux connect:

const ConnectedCounter = connect(
  state => ({ count: state.count }),
  dispatch => ({ inc: () => dispatch({ type: 'inc' }) }),
)(Counter);

Theme injection (legacy):

const ThemedButton = withTheme(Button);

Why hooks largely replaced HOCs

Wrapper hell. Stacking HOCs produces deeply nested trees in DevTools:

<withAuth(withTheme(withLogger(withTracking(Component))))>

Prop name collisions. Multiple HOCs might inject user or theme — silent shadowing.

TypeScript pain. Generic props through multiple HOC layers is gnarly.

Hooks compose without wrapping:

function MyPage() {
  const { user } = useAuth();
  const theme = useTheme();
  useLogger();
  if (!user) return <Redirect to="/login" />;
  return <View theme={theme} />;
}

Same behavior, no wrappers.

When HOCs are still useful

1. Wrapping every instance uniformly.

A render-tracking HOC that wraps the export so every consumer is instrumented:

export default withErrorBoundary(MyComponent);

2. Adapting class components.

If you have a class library you can't change, a HOC can inject hook-based behavior.

3. Library APIs that pre-date hooks.

react-redux connect, react-router withRouter (now deprecated). Still found in legacy code.

4. Forwarding refs through cross-cutting wrappers.

const withTheme = <P,>(Component: React.ComponentType<P>) =>
  React.forwardRef<HTMLElement, P>((props, ref) => {
    const theme = useTheme();
    return <Component {...props} ref={ref} theme={theme} />;
  });

Conventions

• Name starts with with (withAuth, withTheme).
• Copy display name for DevTools: Enhanced.displayName = withAuth(${Component.displayName})``.
• Forward all props with ...props.
• Don't mutate the input component; return a new one.

Alternatives

For new code in 2025: prefer hooks.

Senior framing

HOCs were the pre-hook way to share stateful logic. Hooks render most HOCs obsolete because logic composes via function calls without wrapping the component tree. The remaining valid uses are mostly library boundaries or class-adapter glue. New code should default to hooks.