freeCodeCamp/guide/english/react/higher-order-components/index.md

title

title
Higher-Order Components

Higher-Order Components

In React, a Higher-Order Component (HOC) is a function that takes a component and return a new component. Programmers use HOCs to achieve component logic reuse.

If you've used Redux's connect, you've already worked with Higher-Order Components.

The core idea is:

const EnhancedComponent = enhance(WrappedComponent);

Where:

• enhance is the Higher-Order Component;
• WrappedComponent is the component you want to enhance; and
• EnhancedComponent is the new component created.

This could be the body of the enhance HOC:

function enhance(WrappedComponent) {
  return class extends React.Component {
    render() {
      const extraProp = 'This is an injected prop!';
      return (
        <div className="Wrapper">
          <WrappedComponent
            {...this.props}
            extraProp={extraProp}
          />
        </div>
      );
    }
  }
} 

In this case, enhance returns an anonymous class that extends React.Component. This new component is doing three simple things:

• Rendering the WrappedComponent within a div element;
• Passing its own props to the WrappedComponent; and
• Injecting an extra prop to the WrappedComponent.

HOCs are just a pattern that uses the power of React's compositional nature. They add features to a component. There are a lot more things you can do with them!

Other Resources

• React docs: Higher-Order Components