What Are Higher-Order Components in React and How Do They Work?

What Are Higher-Order Components in React and How Do They Work?

Higher-Order Components, or HOCs, are an older React pattern for reusing component logic. Here is what they are, how they work, and whether they still matter.

What a HOC Is

A Higher-Order Component is a function that takes a component and returns a new component. The new component wraps the original and adds extra behavior, like data fetching or auth checks.

Why HOCs Existed

Before hooks, there was no clean way to reuse stateful logic across components. HOCs let you share that logic by wrapping components, similar to how decorators work in other languages.

A Common Example

withAuth is a classic HOC. It takes a component and returns a new one that checks if the user is logged in, redirecting to login if not, and rendering the original component if yes.

How They Work

The HOC renders the wrapped component and passes it props, often adding extra props with the shared logic. The wrapped component does not know it is wrapped.

The Problems With HOCs

HOCs have issues: name collisions between wrapped props, deep nesting that is hard to read, and difficulty typing. They also make debugging harder because of the wrapper layers.

Why Hooks Replaced Them

Custom hooks solve the same problem, reusing stateful logic, without the nesting and prop collisions. A useAuth hook is cleaner than a withAuth HOC and composes better.

Are HOCs Still Used?

Rarely in new code, but you will see them in older codebases and some libraries. Understand them to read legacy code, but use custom hooks for new logic reuse.

The Takeaway

HOCs are functions that take a component and return a new one with added behavior. They were the pre-hooks way to reuse logic, but custom hooks replaced them. Understand HOCs to read legacy code; use hooks for new code.