Higher-Order Components (HOCs) in React

Higher-Order Components (HOCs) in React are functions that take a component and return a new component with enhanced functionality. They allow you to reuse logic across multiple components without duplicating code.

Here's a basic example of a HOC:

import React from 'react';

// A Higher-Order Component
function withExtraInfo(WrappedComponent) {
  return function EnhancedComponent(props) {
    return (
      <div>
        <p>This is extra info added by the HOC!</p>
        <WrappedComponent {...props} />
      </div>
    );
  };
}

// A regular component
function MyComponent() {
  return <p>This is my component!</p>;
}

// Wrap the component with the HOC
const EnhancedMyComponent = withExtraInfo(MyComponent);

function App() {
  return <EnhancedMyComponent />;
}

export default App;

Key points about HOCs:

• Purpose: Used to add reusable logic to components (e.g., logging, permissions, etc.).
• Pure functions: They don't modify the original component but return a new one.
• Common use cases: Authorization, theme switching, data fetching, etc.

While HOCs were more commonly used before the introduction of React hooks, they are still useful in many cases.