React 组件相互等待渲染

Question

My restaurant order application has two main part, the header part (navigation bar) and the Menu content . When I click a link in the header , the link will be come active (its style change), and the Menu content change. The link is a controlled component. However, I noticed React waits for the Menu part then update both parts at the same time. This is not my desired behavior because when the Menu is big, the page stands still for a few seconds. How can I fix this behavior? I tried React.lazy but it doesn't seem to work

export default function MainPage({ cartState }: MainPageType): JSX.Element {
  const menuInfo: IPayload = useContext(MenuInfoContext);
  const { currentCategoryCode } = useContext(MenuStateContext);
  if (Object.keys(menuInfo).length === 0) return <Spinner />;
  const TopOrMenuList = currentCategoryCode === "0" ? <Top /> : <MenuList />;
  return (
    <>
      <Header />
      {TopOrMenuList}
    </>
  );
}

The link component is as bellow

export const CategoryButton = React.memo(function CategoryButton({
  categoryCode,
  categoryName,
  active,
}: CategoryButtonType) {
  const dispatch = useContext(DispatchContext);

  const handleClick = () => {
    playSound("page");
    dispatch({ type: "currentCategoryCode", payload: categoryCode });
  };

  const className: string = active ? "active" : "";

  return (
    <div
      id={`category-btn-${categoryCode}`}
      className={className}
      onClick={handleClick}
    >
      {categoryName}
    </div>
  );
});

The Menu content change by using key currentCategoryCode to get its content from menuInfo . menuInfo is passed to all components through useContext .

EDIT: I tried moving the conditional render into the return statement like suggestions but it still doesn't help

export default function MainPage({ cartState }: MainPageType): JSX.Element {
  const menuInfo: IPayload = useContext(MenuInfoContext);
  const { currentCategoryCode } = useContext(MenuStateContext);

  return (
    <>
      {Object.keys(menuInfo).length === 0 ? (
        <Spinner />
      ) : (
        <>
          <Header />
          {currentCategoryCode === "0" ? <Top /> : <MenuList />}
        </>
      )}
    </>
  );
}

Answer 1

use setTimeout inside useEffect to provide the data content for Menu after a few miliseconds, render an empty content initially. React will then update the header first