基于HOC实现React组件条件加载Spinner的方案合理性咨询及优化建议

Nice job reaching for HOCs to clean up loading state logic—let’s dive into whether your implementation works, and explore some even better options!

Is your HOC implementation correct? #

Short answer: Yes! Your withLoading HOC does exactly what you need: it takes a component, and returns an enhanced version that renders a spinner when isLoading is truthy, and the target component when loading is complete. The core logic is sound.

That said, there are a few small tweaks and alternative approaches that can make your code cleaner and more aligned with modern React best practices.

Small improvements to your current code #

First, let's look at your usage example—there's some unnecessary component nesting that can be trimmed. Your Menu component just wraps StoreMenu without adding any extra logic, so you can skip that middle layer entirely:

// Simplified usage
import { useSelector } from "react-redux";
import StoreMenu from "./components";
import withLoading from "components/Hoc/WithLoading";

// Wrap StoreMenu directly instead of creating a redundant Menu component
const StoreMenuWithLoading = withLoading(StoreMenu);

const MenuContainer = () => {
  const { menu, loading } = useSelector((state) => state.menu);
  // Pass both loading state and menu data to the enhanced component
  return <StoreMenuWithLoading isLoading={loading} menu={menu} />;
};

export default MenuContainer;

Also, that console.log("Loading", isLoading) in your HOC runs when not loading, which is a bit counterintuitive—you might want to adjust it to log when isLoading is true, or remove it entirely for production.

Better alternatives to HOCs for loading state #

While HOCs work, React's Hooks ecosystem has given us more flexible, easier-to-maintain patterns for this kind of logic. Here are two top options:

1. Custom Hook (Most recommended)

Custom Hooks let you extract reusable state/effect logic without adding extra component layers. This is the modern React way to handle this scenario:

// useMenuData.js
import { useSelector } from "react-redux";

export function useMenuData() {
  const { menu, loading } = useSelector(state => state.menu);
  return {
    data: menu,
    isLoading: loading
  };
}

// In your component file
import Spinner from "components/Spinner";
import StoreMenu from "./components";
import { useMenuData } from "./useMenuData";

const MenuContainer = () => {
  const { data: menu, isLoading } = useMenuData();

  if (isLoading) {
    return <Spinner />;
  }

  return <StoreMenu menu={menu} />;
};

export default MenuContainer;

This approach keeps your component code focused on rendering, with loading logic neatly encapsulated in the hook. No extra nesting, no prop collision risks (a common gotcha with HOCs), and it's easy to reuse the loading logic elsewhere if needed.

2. Render Props Component

If you need more flexibility (like wrapping multiple components or dynamic rendering), a Render Props component is a great choice:

// LoadingWrapper.js
import Spinner from "components/Spinner";
import React from "react";

export default function LoadingWrapper({ isLoading, children }) {
  return isLoading ? <Spinner /> : children;
}

// Usage
import { useSelector } from "react-redux";
import StoreMenu from "./components";
import LoadingWrapper from "./LoadingWrapper";

const MenuContainer = () => {
  const { menu, loading } = useSelector(state => state.menu);

  return (
    <LoadingWrapper isLoading={loading}>
      <StoreMenu menu={menu} />
      {/* You could add other components here too, like a header */}
    </LoadingWrapper>
  );
};

export default MenuContainer;

This is super flexible—you can wrap any JSX you want, and the logic is self-documenting just by looking at the component usage.

Final takeaway #

Your HOC works correctly, but simplifying its usage and switching to a custom Hook will make your code more maintainable and aligned with current React practices. If flexibility is your top priority, a Render Props component is a solid alternative too.

内容的提问来源于stack exchange，提问作者Andaman