React Higher Order Components (HOC)

Key HOC Concepts

const Enhanced = withAuth(MyComponent);

withLoading(withAuth(Component))

<Component {...props} newProp={value} />

if (!isAuth) return <Login />;

🔹 Basic HOC Example

A Higher Order Component is a function that wraps another component to add functionality. Here's a simple example that adds a loading state to any component.

// HOC that adds loading functionality
const withLoading = (Component) => {
  return ({ isLoading, ...props }) => {
    if (isLoading) {
      return <div>Loading...</div>;
    }
    return <Component {...props} />;
  };
};

// Original component
const UserProfile = ({ name }) => (
  <div>
    <h3>User: {name}</h3>
  </div>
);

// Enhanced component with loading
const UserProfileWithLoading = withLoading(UserProfile);

// Usage
<UserProfileWithLoading isLoading={false} name="John" />

🔹 HOC with Props Manipulation

HOCs can modify, add, or remove props before passing them to the wrapped component. This is useful for data transformation or adding default values.

// HOC that adds timestamp to props
const withTimestamp = (Component) => {
  return (props) => {
    const timestamp = new Date().toLocaleTimeString();
    return <Component {...props} timestamp={timestamp} />;
  };
};

// Component that receives timestamp
const Message = ({ text, timestamp }) => (
  <div>
    <p>{text}</p>
    <small>Sent at: {timestamp}</small>
  </div>
);

// Enhanced component
const MessageWithTimestamp = withTimestamp(Message);

// Usage
<MessageWithTimestamp text="Hello World!" />

🔹 Authentication HOC

A common use case for HOCs is protecting routes or components that require authentication. The HOC checks if the user is logged in before rendering the component.

// HOC for authentication
const withAuth = (Component) => {
  return (props) => {
    const isAuthenticated = true; // Check auth status
    
    if (!isAuthenticated) {
      return <div>Please log in to continue</div>;
    }
    
    return <Component {...props} />;
  };
};

// Protected component
const Dashboard = () => (
  <div>
    <h2>Dashboard</h2>
    <p>Welcome to your dashboard!</p>
  </div>
);

// Protected dashboard
const ProtectedDashboard = withAuth(Dashboard);

// Usage
<ProtectedDashboard />

🔹 Composing Multiple HOCs

You can combine multiple HOCs to add different functionalities to a single component. This creates a powerful composition pattern for building complex features.

// Multiple HOCs
const withLoading = (Component) => ({ isLoading, ...props }) => 
  isLoading ? <div>Loading...</div> : <Component {...props} />;

const withError = (Component) => ({ error, ...props }) => 
  error ? <div>Error: {error}</div> : <Component {...props} />;

// Base component
const DataDisplay = ({ data }) => (
  <div>Data: {data}</div>
);

// Compose multiple HOCs
const EnhancedDataDisplay = withLoading(withError(DataDisplay));

// Usage
<EnhancedDataDisplay 
  isLoading={false} 
  error={null} 
  data="Success!" 
/>

🔹 HOC Best Practices