// --- HOC version ---
function withLoading(Component) {
  return function WithLoadingWrapper({ isLoading, ...props }) {
    if (isLoading) {
      return <p>Loading...</p>;
    }
    return <Component {...props} />;
  };
}

function UserProfile({ name }) {
  return <h2>{name}</h2>;
}

const UserProfileWithLoading = withLoading(UserProfile);

function AppWithHOC() {
  return <UserProfileWithLoading isLoading={false} name="Philip" />;
}

// --- Custom hook version ---
import { useState } from "react";

function useLoading(initialValue = true) {
  const [isLoading, setIsLoading] = useState(initialValue);
  return { isLoading, setIsLoading };
}

function UserProfilePage() {
  const { isLoading } = useLoading(false);

  if (isLoading) {
    return <p>Loading...</p>;
  }
  return <h2>Philip</h2>;
}

function AppWithHook() {
  return <UserProfilePage />;
}

/*
  Notes:
  - The HOC version adds an extra wrapper component
    (WithLoadingWrapper) that shows up as its own layer in React
    DevTools, and requires every wrapped component to accept an
    isLoading prop it didn't ask for directly.
  - The custom hook version has no extra wrapper component at all —
    UserProfilePage simply calls useLoading() and handles its own
    conditional rendering inline, exactly the kind of simplification
    that made HOCs mostly unnecessary once hooks existed.
*/