React: What is HOC?

HOC (Higher-Order Component) is a function that takes a component and returns a new component with additional capabilities.

Simple analogy: Imagine you are buying a regular t-shirt (component). HOC is a workshop that:

• Can add a logo to the t-shirt (add data from context).
• Can sew a pocket (add a method for working with API).
• Can turn a t-shirt into a hoodie (wrap in another component). You get the same t-shirt, but with new capabilities.

What it looks like:

1// HOC for authorization check
2function withAuth(WrappedComponent) {
3    return function EnhancedComponent(props) {
4        if (!props.isLoggedIn) {
5            return <LoginPage />;
6        }
7        return <WrappedComponent {...props} />;
8    };
9}
10
11// Usage
12const AdminPanelWithAuth = withAuth(AdminPanel);
13<AdminPanelWithAuth isLoggedIn={false} />  // Will show LoginPage

Popular HOC examples:

• withRouter — adds router props (old React Router).
• connect (Redux) — connects component to Redux store.
• withStyles (Material UI) — adds styles.

HOC disadvantages:

1. Wrapper Hell — if you apply 5 HOCs, you get a deep tree of wrappers.
2. Name conflicts — two HOCs can add a prop with the same name.
3. Hard to debug — you need to go through several layers to understand what is happening.

Modern alternative — custom hooks. Instead of withAuth(Component) it is better to make useAuth().

Why it matters: HOCs were the primary pattern for code reuse in React before hooks. Understanding them helps maintain legacy codebases and understand library APIs like Redux connect().

Common mistake: Not forwarding displayName in HOCs, making debugging harder. Always set EnhancedComponent.displayName = "withAuth(AdminPanel)".