Higher-Order Component (HOC)

A Higher-Order Component (HOC) in React is an advanced pattern where a function takes a component and returns a new component—typically adding props, logic, or behavior. HOCs are used to reuse component logic across multiple parts of an application without repeating code.

This concept is inspired by higher-order functions in JavaScript, which take functions as arguments or return them.

Basic Structure:

jsx
CopyEdit
const withLogger = (WrappedComponent) => {
  return (props) => {
    console.log('Props:', props);
    return <WrappedComponent {...props} />;
  };
};

Usage:

jsx
CopyEdit
const EnhancedComponent = withLogger(MyComponent);

Here, withLogger adds logging functionality without modifying MyComponent directly.

Common Use Cases for HOCs:

• Access control (e.g., withAuth)

• Theming or localization

• Data fetching

• Performance optimizations (e.g., memoization)

• Code reuse across components

Things to Keep in Mind:

• HOCs do not modify the original component—they wrap it.

• Always forward props to avoid breaking the wrapped component.

Use displayName for easier debugging in DevTools:

 jsCopyEditNewComponent.displayName = `WithLogger(${WrappedComponent.displayName || WrappedComponent.name})`;

Why HOCs Matter

HOCs promote separation of concerns, code reuse, and scalability—making them ideal in large React codebases. Although hooks have taken over many use cases, HOCs are still relevant in legacy code and some advanced patterns.

What is Superflex.ai?

Instead of handing designs off to developers or rewriting components from scratch, Superflex turns your Figma files directly into clean, modern React code. It understands structure, style, and intent—so what you design is exactly what gets built. No translation layer, no back-and-forth, just seamless execution from idea to interface. Structure better. Reuse more. Build fast—with Superflex.ai.