Last updated: Apr 29, 2026

Higher-Order Components

A Higher-Order Component (HoC) is a function that takes a component and returns a new component with additional logic baked in. This keeps reusable logic in one place instead of duplicating it across components.

How It Works

A HoC wraps a component, injects props or behavior (e.g. data fetching, auth checks, styling), and renders the original component with those extras.

HoC(Component) → EnhancedComponent

Example

function withLoader<T>(Component: React.ComponentType<T>) {
  return function Enhanced(props: T & { isLoading: boolean }) {
    if (props.isLoading) return <p>Loading...</p>;
    return <Component {...props} />;
  };
}

function UserList({ users }: { users: User[] }) {
  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

const UserListWithLoader = withLoader(UserList);

// Usage
<UserListWithLoader isLoading={loading} users={users} />;

withLoader adds loading state handling to any component without that component needing to know about it.

Trade-offs