Higher-Order Components (HOC) in React

Higher-Order Components (HOCs) are a pattern in React that allows you to reuse component logic. They are not part of the React API, but a pattern that emerges from React's compositional nature.

What is a Higher-Order Component?

A Higher-Order Component is a function that takes a component and returns a new component with additional props or functionality.

Creating a Higher-Order Component

Step 1: Define the HOC Function

To create an HOC, define a function that takes a component as an argument and returns a new component.

import React from 'react';

const withLogger = (WrappedComponent) => {
  return (props) => {
    console.log('Props:', props);
    return <WrappedComponent {...props} />;
  };
};

Step 2: Use the HOC

Use the HOC to enhance a component by passing the original component to the HOC function.

const MyComponent = (props) => {
  return <div>{props.message}</div>;
};

const EnhancedComponent = withLogger(MyComponent);

// Usage
<EnhancedComponent message="Hello, World!" />;

Example: Adding Authentication

Here is an example of an HOC that adds authentication logic to a component.

Step 1: Create the Authentication HOC

const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = /* your authentication logic here */;
    
    if (!isAuthenticated) {
      return <div>Please log in to view this page.</div>;
    }

    return <WrappedComponent {...props} />;
  };
};

Step 2: Apply the Authentication HOC

const Dashboard = () => {
  return <div>Welcome to your dashboard!</div>;
};

const ProtectedDashboard = withAuth(Dashboard);

// Usage
<ProtectedDashboard />;

Benefits of HOCs

• Code Reusability: HOCs allow you to reuse logic across multiple components.
• Separation of Concerns: They help keep component logic separate from UI rendering.
• Composition: HOCs enable you to compose components in flexible and powerful ways.

Example: Fetching Data with HOC

Step 1: Create a Data Fetching HOC

import React, { useState, useEffect } from 'react';

const withDataFetching = (WrappedComponent, url) => {
  return (props) => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
      const fetchData = async () => {
        try {
          const response = await fetch(url);
          const result = await response.json();
          setData(result);
        } catch (error) {
          setError(error);
        } finally {
          setLoading(false);
        }
      };

      fetchData();
    }, [url]);

    return (
      <WrappedComponent
        data={data}
        loading={loading}
        error={error}
        {...props}
      />
    );
  };
};

export default withDataFetching;

Step 2: Apply the Data Fetching HOC

const UserList = ({ data, loading, error }) => {
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

const UserListWithData = withDataFetching(UserList, 'https://jsonplaceholder.typicode.com/users');

// Usage
<UserListWithData />;

Conclusion

Higher-Order Components are a powerful pattern for reusing component logic in React. They help you write cleaner, more maintainable code by abstracting common functionalities into reusable HOCs.