Higher-Order Components

Higher-Order Components

A Higher-Order Component (HOC) is an advanced technique in React for reusing component logic.

HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. Conceptually, they are similar to Higher-Order Functions in JavaScript.

A higher-order component is a function that takes a component and returns a new component.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Why use HOCs?

Before the introduction of React Hooks (in v16.8), HOCs were the primary way to share stateful logic between components. If you had five different components that all needed to fetch user data on mount, you would write one withUser HOC and wrap all five components in it, rather than duplicating the fetch logic.

Note: In modern React, Custom Hooks (useUser) have largely replaced HOCs for sharing logic, but you will still encounter HOCs in older codebases and third-party libraries.

How to write an HOC

An HOC is just a standard JavaScript function. By convention, HOC names start with with (e.g., withRouter, withStyles, withAuth).

Here is an example of a simple HOC that injects a theme prop into a component.

// 1. The HOC function accepts a component as an argument
function withTheme(WrappedComponent) {
  
  // 2. It returns a brand new functional component
  return function EnhancedComponent(props) {
    // 3. The new component can manage state, read context, etc.
    const theme = "dark"; // In reality, this might come from Context
    
    // 4. It renders the original component, passing through all original props,
    // plus any new props (like 'theme')
    return <WrappedComponent {...props} theme={theme} />;
  };
}

Using an HOC

To use the HOC, you pass your component into it. The result is what you actually export and render.

function Button(props) {
  // This component expects a 'theme' prop, but doesn't know where it comes from
  return <button className={props.theme}>{props.label}</button>;
}

// Wrap the Button to give it the theme logic
const ThemedButton = withTheme(Button);

// Usage somewhere else:
function App() {
  // We only pass 'label'. The 'theme' is injected by the HOC.
  return <ThemedButton label="Click Me" />; 
}

Important Rules for HOCs

1. Don’t Mutate the Original Component: An HOC should compose the original component by wrapping it in a container. It should not modify the prototype or properties of the WrappedComponent directly.
2. Pass Unrelated Props Through: HOCs should pass through props that are unrelated to their specific concern (using {...props}).
3. Don’t Use HOCs Inside the Render Method: You must apply HOCs outside the component definition. If you do const Enhanced = withTheme(MyComponent) inside the App render function, React will unmount and remount the component entirely on every single render, losing its state.

Interview Questions

Q: What is a Higher-Order Component (HOC)?
A: An HOC is a function that takes a component as an argument and returns a new component, typically wrapping the original with additional props, styling, or authentication logic (e.g., withAuth(Dashboard)). Like the Container pattern, HOCs have been heavily superseded by custom Hooks.