---
title: Higher-Order Components
description: Reuse component logic by wrapping components in a function that adds shared behavior.
tokens: ~397
---

# 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

```tsx
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

| Pros                                      | Cons                                                    |
| ----------------------------------------- | ------------------------------------------------------- |
| Reusable logic lives in one place         | Wrapper nesting can get deep ("wrapper hell")           |
| Original component stays simple           | Harder to trace where props come from                   |
| Composable — multiple HoCs can be stacked | Naming collisions if multiple HoCs inject the same prop |