使用setTimeout确保函数在useEffect后执行是否为不良实践？

你用setTimeout延迟setTest2的方式属于不良实践，原因包括：

• 依赖JavaScript事件循环的时序实现逻辑，属于hack手法。React的更新机制（比如并发模式、批量更新策略）在未来版本可能调整，会导致这段代码逻辑失效。
• 可读性极差，其他开发者看到这段代码时，无法直观理解为什么要加1ms延迟，需要额外注释说明，增加维护成本。
• 存在竞态风险，如果后续有其他异步操作，可能会打乱预期的执行顺序，引发难以排查的bug。

更合理的实现方案 #

方案1：用状态标记区分触发场景

通过新增一个状态标记，判断test的更新是否来自calledFunction，从而决定是否执行test2的重置逻辑：

const [test, setTest] = useState();
const [test2, setTest2] = useState();
const [isFromCalledFunction, setIsFromCalledFunction] = useState(false);

useEffect(() => {
  if (!isFromCalledFunction) {
    setTest2(undefined);
  }
  // 执行后重置标记，不影响后续的test更新
  setIsFromCalledFunction(false);
}, [test]);

const calledFunction = () => {
  setIsFromCalledFunction(true);
  setTest(whatever);
  setTest2(thisIsWhatIwant);
};

方案2：合并关联状态

如果test和test2的更新逻辑高度关联，可以将它们合并为一个对象状态，避免单独监听test带来的副作用干扰：

const [state, setState] = useState({ test: undefined, test2: undefined });

// 移除原有的useEffect，统一通过setState管理状态

const calledFunction = () => {
  setState({
    test: whatever,
    test2: thisIsWhatIwant
  });
};

// 其他需要单独更新test并重置test2的场景
const updateTestAndResetTest2 = () => {
  setState({
    test: newTestValue,
    test2: undefined
  });
};

方案3：用useRef保存临时标记

useRef的更新不会触发组件重渲染，适合用来保存一次性的跳过标记：

const [test, setTest] = useState();
const [test2, setTest2] = useState();
const skipResetTest2 = useRef(false);

useEffect(() => {
  if (skipResetTest2.current) {
    skipResetTest2.current = false;
    return;
  }
  setTest2(undefined);
}, [test]);

const calledFunction = () => {
  skipResetTest2.current = true;
  setTest(whatever);
  setTest2(thisIsWhatIwant);
};

这些方案都遵循React的状态管理逻辑，代码清晰可维护，不会依赖不稳定的时序假设。

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