React 18.2中多次setState未批量更新问题排查求助

一、异步回调中setState不批量更新的核心原因 #

React 18的自动批量更新机制仅覆盖浏览器原生事件回调（如点击、输入）、React合成事件以及useEffect同步代码块中的状态更新。而Promise.then、setTimeout这类异步回调不在自动批量更新范围内，里面每个setState都会单独触发一次重渲染——这就是你看到三次"render"打印的直接原因。

二、flushSync对批量更新的影响 #

你开头用的flushSync仅作用于它包裹的setLoading(true)，强制该状态同步更新并立即触发重渲染，但它不会影响后续异步then块里的状态更新逻辑。也就是说，这个flushSync和后面三次单独重渲染的问题没有直接关联。

三、解决思路与方案 #

1. 用flushSync包裹异步回调中的多状态更新 #

把then里的三个状态更新放进同一个flushSync回调，强制React批量处理这些更新，只触发一次重渲染：

NavigationApi.getMenuFragment(pageId)
  .then((data) => {
    const newMenu: { [key: string]: MenuType } = {};
    newMenu[pageId] = data;
    flushSync(() => {
      console.log('setcontentlist');
      setDrawerContentList({ ...drawerContentList, ...newMenu });
      console.log('setcontent');
      setDrawerContent(data);
      console.log('setloadingfalse');
      setLoading(false);
    });
  })
  .catch(() => {
    flushSync(() => {
      setDrawerContent(null);
      setLoading(false);
    });
  });

2. 合并关联状态（更推荐） #

如果drawerContentList、drawerContent和loading的更新总是绑定在一起，可以将它们合并为一个状态对象，一次setState就能完成所有更新，自然只触发一次重渲染：

// 定义合并后的状态类型
type DrawerState = {
  contentList: { [key: string]: MenuType };
  content: MenuType | null;
  loading: boolean;
};

// 初始化合并状态
const [drawerState, setDrawerState] = useState<DrawerState>({
  contentList: {},
  content: null,
  loading: false,
});

// 更新时用函数式更新确保获取最新状态
NavigationApi.getMenuFragment(pageId)
  .then((data) => {
    const newMenu: { [key: string]: MenuType } = {};
    newMenu[pageId] = data;
    setDrawerState(prevState => ({
      ...prevState,
      contentList: { ...prevState.contentList, ...newMenu },
      content: data,
      loading: false,
    }));
  })
  .catch(() => {
    setDrawerState(prevState => ({
      ...prevState,
      content: null,
      loading: false,
    }));
  });

3. 用startTransition区分紧急/非紧急更新 #

如果部分状态更新不影响即时UI展示（比如drawerContentList的缓存更新），可以用startTransition包裹非紧急更新，React会优先处理紧急更新（如setLoading(false)），再批量处理非紧急更新：

import { startTransition } from 'react';

// then块中
setLoading(false); // 紧急更新先执行
startTransition(() => {
  setDrawerContentList({ ...drawerContentList, ...newMenu });
  setDrawerContent(data);
});

额外优化点 #

你代码中useCallback的依赖项包含drawerContentList和loading，这会导致每次这两个状态变化时，fetchMenuById都会重新创建。如果该函数在useEffect中调用，可能引发不必要的重渲染或重复请求。建议用函数式更新获取最新状态，从而移除drawerContentList依赖：

// 原更新方式
setDrawerContentList({ ...drawerContentList, ...newMenu });
// 改为函数式更新
setDrawerContentList(prev => ({ ...prev, ...newMenu }));

这样就能把drawerContentList从useCallback的依赖列表中移除，减少函数不必要的重新创建。

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