mediumFrontend

What are Higher-Order Components (HOCs) in React?

Q: What are Higher-Order Components (HOCs) in React?

**Core concept (TL;DR).** A Higher-Order Component is a **function that takes a component and returns a new, enhanced component** — const Enhanced = withX(Component) . It was the pre-hooks pattern for reusing cross-cutting logic (auth, data loading, logging) across many components. Today **custom hooks** usually do the same job more cleanly. Wrap a component to inject shared behaviour Component <rect x="210"

387 views

Understand the problem

Define Higher-Order Components, explain their structure, and their use cases.

hocreusabilitycompositiondesign patterns

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A withLoading HOC

function withLoading(Component) {
  return function Wrapped({ isLoading, ...props }) {  // forward other props
    if (isLoading) return <p>Loading…</p>;
    return <Component {...props} />;
  };
}

function UserList({ users }) {
  return <ul>{users.map((u) => <li key={u}>{u}</li>)}</ul>;
}

const UserListWithLoading = withLoading(UserList);

export default function App() {
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <UserListWithLoading isLoading={false} users={["Ada", "Grace"]} />
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Describe the benefits of using TypeScript with React.

Explain the purpose of `useEffect`.