What is the higher-order component in react

function withLoader(WrappedComponent) {
  return function WithLoader(props) {
    const [isLoading, setLoading] = useState(false);
    
    useEffect(() => {
      setLoading(true);
      fetchData().then(() => setLoading(false));
    }, []);

    return isLoading ?  : ;
  }
}

function MyComponent(props) {
  return 
{props.data}
;
}

const MyComponentWithLoader = withLoader(MyComponent);

 the withLoader HOC takes a component as an argument and returns a new component (WithLoader) that wraps the original component (MyComponent). The WithLoader component uses the useState hook to manage the isLoading state and the useEffect hook to fetch the data and update the isLoading state. The WithLoader component renders either a loading spinner or the original component with the data prop passed down to it.

The HOC is a way to implement cross-cutting concerns, such as logging, authentication, or data fetching, by wrapping components in a reusable way. By using HOCs, you can avoid code duplication and keep your components simple and focused on their primary responsibilities.

To create an HOC, you define a function that takes a component as an argument and returns a new component that wraps the original component. The new component can add new props or modify existing props to the original component. The new component can also render the original component with some additional functionality, such as a loading spinner or a message for unauthorized users.

A higher-order component (HOC) is a function in React that takes a component and returns a new component with additional functionality. In other words, a higher-order component is a function that takes a component and returns a new component.

HOCs are commonly used in React to abstract away common functionality from components and reuse it across multiple components. For example, if you have multiple components that require authentication, you can create an HOC that handles the authentication logic and wraps each of these components to provide the necessary functionality.

Hello Naresh refer below articles

https://www.c-sharpcorner.com/article/higher-order-component-in-react/
https://www.c-sharpcorner.com/article/higher-order-components-in-reactjs/
https://www.c-sharpcorner.com/article/higher-order-components-in-react/

Hi Naresh, HOC is a pattern, where you can plug it on-demand basis or reuse the component instead of duplicating the code. Please find some examples 

1. storybook concept
2. https://levelup.gitconnected.com/real-world-examples-of-higher-order-components-hoc-for-react-871f0d8b39d8