Higher-Order Components (HOCs)

The plain-language idea

A Higher-Order Component is a function: Component -> EnhancedComponent. It wraps the component you give it in another component that adds behavior — props, state, a subscription — before rendering the original:

function withUser(Wrapped) {
  return function WithUser(props) {
    const user = useContext(UserContext);
    return <Wrapped {...props} user={user} />;   // inject a prop, render the original
  };
}

const ProfileWithUser = withUser(Profile);
<ProfileWithUser />  // Profile receives a `user` prop it never had to fetch itself

This is the higher-order-function concept from the JavaScript track, one level up: instead of taking/returning plain functions, withUser takes/returns components (which, remember, are just functions themselves).

withUser(Profile) — a function that takes a component and returns an enhanced one.

BackNext

What people usually miss

Watch out

• HOCs and render props solve the same problem, differently. Both share stateful logic across components; a HOC does it by wrapping and injecting props, a render prop does it by calling a function during render — both were largely superseded by custom hooks for the same reason (nesting cost).
• Naming and static properties don't automatically carry over. A HOC's returned component needs its own displayName set manually for good DevTools debugging, and needs to explicitly forward any static methods the original component had — none of that happens for free.
• Prop name collisions are a real, silent bug risk. If withUser injects a user prop and the caller also tries to pass its own user prop, one silently overwrites the other depending on prop-spread order — a class of bug custom hooks avoid entirely by not touching props at all.

Why this matters in interviews

"What's a Higher-Order Component, and why would you use a custom hook instead today?" checks the same historical fluency as render props — recognizing the pattern in legacy code and articulating precisely why hooks are the modern replacement.