Higher Order Components

Higher Order Components (HOCs) is an advanced technique in React for reusing component logic. They are not part of the React API, but rather a pattern that emerges from React’s compositional nature.

What is a Higher Order Component?

In simple terms, a Higher Order Component (HOC) in React is a pattern that is used to share common functionality between components without repeating the code. A HOC is a function that takes a component and returns a new component with additional props and logic.

This might sound a bit confusing, so let's break it down further.

Imagine you have a function, add. This function takes in two numbers, adds them together, and returns the result. You could say this function "wraps" the addition operation and "enhances" it by providing a convenient way to add two numbers together.

A Higher Order Component does the same thing, but with components. It takes in a component, "wraps" it, and returns a new component that "enhances" the original by adding new props and logic.

Why Use Higher Order Components?

Higher Order Components are useful for many reasons. One of the main benefits is that they allow you to write DRY (Don't Repeat Yourself) code. If multiple components need to share the same logic (for example, fetching data from an API), you can extract this logic into a HOC and share it across components.

Creating a Higher Order Component

Let's look at how we can create a basic Higher Order Component.

In the example below, we're creating a HOC called withExtraPropAdded. This HOC takes a component (WrappedComponent) and returns a new component that renders the WrappedComponent with an extra prop (extraProp):

function withExtraPropAdded(WrappedComponent) {
  return function(props) {
    return <WrappedComponent extraProp="someValue" {...props} />;
  }
}

You can then use this HOC to create a new component with the extra prop:

const ComponentWithExtraProp = withExtraPropAdded(SomeComponent);

In this example, ComponentWithExtraProp is a new component that renders SomeComponent with an extraProp prop.

Caveats

While HOCs are a powerful tool, they come with a few caveats:

• Don't use HOCs inside the render method. React's diffing algorithm (Reconciliation) uses component identity to determine whether it should update the component's subtree. By applying a HOC in a render method, you're technically creating a new component each time your component renders.

• Pass unrelated props through to the wrapped component. HOCs should pass through props that are unrelated to its specific behavior. Most HOCs contain a render method that looks something like this:

render() {
  // Filter out extra props that are specific to this HOC and shouldn't be
  // passed through
  const { extraProp, ...passThroughProps } = this.props;

  // Inject props into the wrapped component. These are usually state values or
  // instance methods
  const injectedProp = someTransform(extraProp);

  // Pass props to wrapped component
  return (
    <WrappedComponent injectedProp={injectedProp} {...passThroughProps} />
  );
}

• Mutating HOCs are not recommended. Avoid manipulating the original component in any way, this includes applying methods directly to the component prototype.

In summary, Higher Order Components are a powerful tool for abstracting and reusing component logic. They are a pattern that takes advantage of React's compositional nature, allowing developers to write cleaner and more maintainable code.