How do I create a Higher-Order Component (HOC) in React?

How do I create a Higher-Order Component (HOC) in React?

To create a HOC in React, you need to define a function that takes a component as an argument and returns a new component.

Can you give me an example of a simple HOC?

Sure! Here's a basic example:

const withLogging = (WrappedComponent) => {
  return (props) => {
    console.log('Rendering:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
};

This HOC logs the name of the wrapped component every time it renders.

How do I use this HOC with a component?

You can use it like this:

const MyComponent = () => <div>Hello World!</div>;
const MyComponentWithLogging = withLogging(MyComponent);

Now, MyComponentWithLogging will log to the console whenever it renders.

What are some common use cases for HOCs?

Common use cases for HOCs include adding logging, handling authentication, managing state, or injecting props.