React HOC

What is a Higher Order Component?

A Higher Order Component (HOC) is like a wrapper that adds extra features to your React components. Think of it like putting a case on your phone - the case adds new features (like water protection) without changing the phone itself.

Note: HOCs are functions that take a component and return an enhanced version of that component.

Example: Adding a Border

To demonstrate how HOCs work, let's create a simple example - adding a border to any component:

Example

// This is our HOC - it adds a border to any component
function withBorder(WrappedComponent) {
  return function NewComponent(props) {
    return (
      <div style={{ border: '2px solid blue', padding: '10px' }}>
        <WrappedComponent {...props} />
      </div>
    );
  };
}

// Simple component without border
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Create a new component with border
const GreetingWithBorder = withBorder(Greeting);

function App() {
  return (
    <div>
      <Greeting name="John" />
      <GreetingWithBorder name="Jane" />
    </div>
  );
}

In this example:

1. withBorder is our HOC - it's a function that takes a component
2. It returns a new component that wraps the original in a div with a border
3. The original component (Greeting) remains unchanged
4. We can still use both the original and enhanced versions

Note: Often, HOC's can be replaced with React Hooks, but HOC's are still useful for certain cross-cutting concerns like authentication or data fetching patterns.