What is it

A higher-order component is just a function that takes an existing component and returns another component that wraps it.

• reuse component logic by taking a component and returning a new component with additional functionality.

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

// Higher-Order Component (HOC) that adds loading and error handling
const withLoadingAndError = (WrappedComponent) => {
  return function EnhancedComponent(props) {
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
      setTimeout(() => {
        try {
          setIsLoading(false);
        } catch (err) {
          setError(err.message);
          setIsLoading(false);
        }
      }, 2000);
    }, []);

    // If data is still loading, show loading message
    if (isLoading) {
      return <div>Loading...</div>;
    }

    // If there was an error, show error message
    if (error) {
      return <div>Error: {error}</div>;
    }

    // Render the wrapped component with all props passed down
    return <WrappedComponent {...props} />;
  };
};

export default withLoadingAndError;