What are HOC (higher order components)?

In React, a higher-order component (HOC) is a function that takes a component and returns a new component. HOCs are a pattern that emerges from React’s compositional nature. They are a way to reuse code, logic, and props manipulation across components.

They can be used to abstract state logic, prop manipulation, and other logic that you might want to reuse across multiple components.

Example 1

Here’s an example of a HOC that adds a new prop to a component called withFoo:

import React from 'react';

const withFoo = (WrappedComponent) => {
  return class extends React.Component {
    render() {
      return <WrappedComponent {...this.props} foo="bar" />;
    }
  }
}

To use this HOC, you can wrap a component with the withFoo function:

import MyComponent from './MyComponent';

const MyEnhancedComponent = withFoo(MyComponent);

// Now you can use <MyEnhancedComponent /> in the same way as <MyComponent />, but it will have a new prop called `foo`.

Example 2

Here’s another example of a HOC that adds a new prop called isLoading and displays a loading spinner while the component is in a loading state:

import React from 'react';

const withLoading = (WrappedComponent) => {
  return class extends React.Component {
    render() {
      const { isLoading, ...otherProps } = this.props;
      if (isLoading) {
        return <div>Loading...</div>;
      }
      return <WrappedComponent {...otherProps} />;
    }
  }
}

You can use this HOC by wrapping a component with the withLoading function and passing an isLoading prop:

import MyComponent from './MyComponent';

const MyEnhancedComponent = withLoading(MyComponent);

// You can use <MyEnhancedComponent isLoading /> to show a loading spinner while the component is loading.

Example 3

Here is an example of a HOC that takes a component and returns a new component that has a new prop called “favoriteColor” with a value of “red”:

import React from 'react';

function withFavoriteColor(WrappedComponent) {
  return function(props) {
    return <WrappedComponent {...props} favoriteColor="red" />
  }
}

const MyComponent = (props) => {
  return <div>My favorite color is {props.favoriteColor}</div>;
}

const MyComponentWithFavoriteColor = withFavoriteColor(MyComponent);

// Now, when you render <MyComponentWithFavoriteColor />, it will have a prop called "favoriteColor" with a value of "red"

Here is another example of a HOC that takes a component and returns a new component that has a new prop called “isLoading” with a value of true when the component is in the process of loading data, and a value of false when the data has finished loading:

import React from 'react';

function withLoading(WrappedComponent) {
  return class extends React.Component {
    state = { isLoading: true };

    componentDidMount() {
      this.setState({ isLoading: false });
    }

    render() {
      return <WrappedComponent {...this.props} isLoading={this.state.isLoading} />;
    }
  }
}

const MyDataComponent = (props) => {
  if (props.isLoading) {
    return <div>Loading...</div>;
  } else {
    return <div>My data: {props.data}</div>;
  }
}

const MyDataComponentWithLoading = withLoading(MyDataComponent);

// Now, when you render <MyDataComponentWithLoading />, it will show a loading message until the data has finished loading

I hope these examples help! Let me know if you have any questions.