Higher-Order Components

A higher-order component is a function that takes a component and returns a new component with extra behavior — historically how React codebases shared cross-cutting concerns before Hooks.

function withLogger(Wrapped) {
  function WithLogger(props) {
    useEffect(() => {
      console.log('mounted', Wrapped.name);
    }, []);
    return <Wrapped {...props} />;
  }
  WithLogger.displayName = `withLogger(${Wrapped.displayName || Wrapped.name})`;
  return WithLogger;
}

const ProfileWithLogger = withLogger(Profile);

Docs: HOCs — legacy, modern alternative custom hooks.

What HOCs were good at

• Injecting auth user, feature flags, or analytics props.
• Conditional rendering shells (requireAuth).
• Libraries (early Redux connect, React Router pre-hooks APIs).

Costs

1. Wrapper hell — DevTools stacks of withX(withY(withZ(...))).
2. Static prop collisions — HOC prop names clash with wrapped props.
3. Refs — need forwardRef to pass refs through.
4. Types — generic HOCs are verbose in TypeScript.
5. Composition order matters and is easy to get wrong.

Prefer hooks or components

// Instead of withUser(Profile)
function Profile() {
  const user = useUser();
  return <div>{user.name}</div>;
}

Or composition:

function RequireAuth({ children }) {
  const user = useUser();
  if (!user) return <LoginRedirect />;
  return children;
}

See render props for the other historical pattern.

When you still see HOCs

Legacy code, design-system cross-cuts, and some library APIs. Understand them for reading old code and interviews; do not introduce them in new UI without a strong reason.

Interview out-loud

“An HOC is a function from component to component that injects behavior or props. Hooks and wrapper components replaced most HOC use because they compose with less nesting and better TypeScript ergonomics. I can still read connect-style APIs and forward refs through wrappers when maintaining legacy code.”

Related on this site

• Render Props Pattern
• Composition vs Inheritance
• Forwarding Refs
• Function Components

Further reading

• Higher-Order Components — legacy React docs
• Reusing Logic with Custom Hooks — react.dev

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides

• Accessibility Patterns in ReactPractical React a11y: labels, focus management, keyboard, live regions, and composition patterns that stay accessible.
• Avoid Prop Drilling with CompositionStop threading props through intermediates: children slots, inversion of control, and when context is the right escape hatch.
• Batching State UpdatesHow React 18+ batches setState in events, timeouts, and promises: when updates flush and why double setState still works.
• Children Prop PatternsUsing children and slot props for flexible APIs: wrappers, compound components, and when to prefer explicit props.
• Client Component BoundariesWhere to put use client: push interactivity to leaves, serializable props, and children as server slots.