What are some examples of custom higher-order components (HOCs) in React?

Can you give me some examples of custom higher-order components in React?

Sure! A custom HOC is a function that takes a component and returns a new component. For example, a simple HOC could be one that adds logging functionality to any component.

How would I implement a logging HOC?

You can create a function that takes a component and returns a new component that logs props or state changes. Here's a basic example:

const withLogging = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component mounted:', this.props);
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

What are some other use cases for HOCs?

HOCs can be used for various purposes like adding authentication, handling data fetching, or managing state. They help in reusing component logic.

Can you show me an example of an HOC for authentication?

Absolutely! An authentication HOC could check if a user is logged in before rendering a component. If not, it could redirect them to a login page.