react/HOC

A Higher-Order Component is a function that takes a component and returns a new, enhanced component — function(Component) => EnhancedComponent — the component-tree equivalent of function composition. Before hooks, HOCs were the standard way to handle cross-cutting concerns like authentication checks, data fetching, or logging that needed to apply to many otherwise-unrelated components.

HOCs come with well-known pitfalls: props the HOC injects can collide in name with props the wrapped component already receives, refs don't pass through an HOC automatically (since a ref attached to the returned component doesn't reach the wrapped one without explicit forwardRef), and stacking multiple HOCs creates 'wrapper hell' — extra layers in the component tree that make React DevTools harder to read and debugging slower. Well-written HOCs also copy static methods from the wrapped component and set a clear displayName, specifically to keep debugging manageable.