如何保证React中state更新按同步顺序执行，避免非预期副作用

首先明确一个前提：你现有代码里的执行顺序本来就是稳定的。同一个同步执行上下文内的函数调用顺序不会受React异步批量更新的影响，applyFilter(customDate)一定会先完整执行，之后才会调用setCustomDate([])，不存在两个操作顺序颠倒的问题。React的异步批量更新只是会把同一个同步栈内的所有state更新合并，推迟到所有同步代码执行完后再统一触发重渲染，并不会打乱普通函数的执行顺序，你现在代码能正常运行也正是因为这个原因。

如果你需要确保setCustomDate的更新生效之后再执行其他逻辑，有两种符合React规范的实现方式：

• 方案1：用useEffect监听状态变化*（推荐，符合React声明式范式）*
  单独加一个副作用监听customDate的状态，当它被清空时执行后续逻辑：

  // 原有逻辑不变
  useEffect(() => {
    if (customDate.from && customDate.to) {
      applyFilter(customDate);
      setCustomDate([]);
    }
  }, [customDate, applyFilter]);
  
  // 新增监听customDate清空的副作用
  useEffect(() => {
    // 根据你customDate的实际类型判断是否为空，此处为数组示例
    if (customDate.length === 0) {
      // 这里写customDate更新为空之后需要执行的逻辑
    }
  }, [customDate])
  

• 方案2：用flushSync强制同步更新state*（仅特殊场景使用）*
  如果你需要立刻拿到更新后的state对应的DOM状态，避免批量更新的延迟，可以用react-dom提供的flushSync方法强制同步刷新状态：
  首先导入依赖：

  import { flushSync } from 'react-dom';
  

  调整原有逻辑：

  useEffect(() => {
    if (customDate.from && customDate.to) {
      applyFilter(customDate);
      // 包裹set操作，强制同步更新
      flushSync(() => {
        setCustomDate([]);
      });
      // 此处的代码会在customDate更新完成、重渲染执行完之后才运行
    }
  }, [customDate, applyFilter]);
  

注意：flushSync会打断React的批量更新优化，带来不必要的重渲染性能损耗，除非你确实需要在state更新后立刻读取DOM的最新状态，否则不建议使用。

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