● Higher Order Components (HOCs) are advanced React components that are designed to wrap other components and provide them with additional functionality. 
● HOCs can be thought of as reusable pieces of code that allow developers to quickly add features such as data fetching, state management, or even authentication without having to write it all from scratch each time. 
● They also provide a way for developers to easily separate concerns by abstracting out common logic into its own component, which can then be reused in multiple places throughout an application. This helps keep the codebase more organized and extensible over time – reducing the risk of errors being introduced due to lack of maintenance. Furthermore, since HOCs rely on composition instead of inheritance they’re much easier for beginners to grasp compared with traditional object-oriented programming principles like classes and objects. 

Finally, higher order components offer a great opportunity for experienced React developers who want to share their knowledge with others by creating their own custom wrappers that can be used across different projects and teams. 

A higher-order component allows you to reuse component logic and props between components. 

Here is an example of how to create a higher-order component that adds a new prop to a component: 

const withName = (WrappedComponent) => { 
return class extends React.Component { 
render() { 
return <WrappedComponent name="John" {...this.props} /> 
} 
} 
} 
class MyComponent extends React.Component { 
render() { 
return <div>My name is {this.props.name}</div> 
} 
} 
const MyComponentWithName = withName(MyComponent) 

In this example, the withName HOC is a function that takes a component as an argument and returns a new component. The new component has an additional prop name added to it. The prop name is passed to the wrapped component using the spread operator. 
Another example is a HOC that conditionally renders a component depending on the user's role. 

const withRoleCheck = (WrappedComponent) => { 
return class extends React.Component { 
render() { 
const { userRole, ...rest } = this.props 
if (userRole === 'admin') { 
return <WrappedComponent {...rest} /> 
} else { 
return <div>You do not have permission to access this page</div> 
} 
} 
} 
} 
class AdminPage extends React.Component { 
render() { 
return <div>Welcome to the admin page</div> 
} 
} 
const AdminPageWithRoleCheck = withRoleCheck(AdminPage) 

In this example, the withRoleCheck HOC is a function that takes a component as an argument and returns a new component. The new component checks the user's role prop and conditionally renders the wrapped component or an access denied message.