HOC

What is an HOC?

A Higher-Order Component is a function that:
— receives a component
— returns an enhanced component

Basic structure:
const withSomething = <Props,>(
  WrappedComponent: React.ComponentType<Props>,
) => {
  return function EnhancedComponent(props: Props) {
    return <WrappedComponent {...props} />;
  };
};

Usage:
const EnhancedProfile = withSomething(ProfileTab);
The original component is not modified directly. The HOC adds behavior around it.

Advantages of HOCs

1. Reuse shared behavior

If five components need the same behavior, you can implement it once:

withErrorBoundary(ComponentA)
withErrorBoundary(ComponentB)
withErrorBoundary(ComponentC)

Get Anush Lobo’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

instead of repeating the same wrapper code in every component.

2. Separation of concerns

The original component focuses on its actual UI.
The HOC handles a cross-cutting concern such as:
- error handling
- access control
- loading state
- analytics
- permissions
- logging

3. Keeps components smaller

A component does not need to know how a feature is monitored or protected.
For example:
const ProfileTab = () => {
// profile UI only
};
The HOC can handle error isolation around it.

4. Consistent behavior

All components wrapped with the same HOC receive the same behavior and fallback UI.

5. Good for legacy and reusable component patterns

HOCs are especially useful when:
- many unrelated components need the same behavior
- the behavior is component-level
- you want to enhance existing components without editing their internals