如何阻止React useEffect的先前执行实例更新状态？

你遇到的是典型的竞态条件问题——旧的useEffect异步操作晚于新实例完成，导致旧结果覆盖新状态。解决核心是让旧实例知道自己已经过时，放弃更新状态，具体可以通过useEffect的清理函数实现：

方案：用标志位标记有效实例 #

在useEffect内部声明一个标志变量，在清理函数中将其置为false，异步操作完成后先检查标志位，仅当有效时才更新状态：

useEffect(() => {
  // 标记当前实例是否有效
  let isCurrent = true;

  (async () => {
    let data = [];
    try {
      if (xyz) {
        data = await lessTimeIntensive();
      } else {
        data = await moreTimeIntensive();
      }
      // 只有当前实例仍有效时才更新状态
      if (isCurrent) {
        setResponse(data);
      }
    } catch (error) {
      // 错误处理也可以加上标志位判断，避免过时的错误状态更新
      if (isCurrent) {
        // 比如 setError(error)
      }
    }
  })();

  // 清理函数：依赖变化/组件卸载时，标记当前实例失效
  return () => {
    isCurrent = false;
  };
}, [value1, value2, value3]);

原理说明 #

每次useEffect触发时，都会创建一个独立的isCurrent变量。当依赖数组变化触发新的useEffect执行时，旧实例的清理函数会先执行，把自己的isCurrent设为false。等旧实例的异步操作完成后，检查到isCurrent为false，就不会再调用setResponse，从而避免覆盖新状态。

如果你的异步操作是基于fetch的，还可以结合AbortController主动取消旧请求，进一步优化性能：

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  (async () => {
    let data = [];
    try {
      if (xyz) {
        data = await lessTimeIntensive(signal); // 传递signal给异步函数
      } else {
        data = await moreTimeIntensive(signal);
      }
      setResponse(data);
    } catch (error) {
      // 忽略取消请求导致的错误
      if (error.name !== 'AbortError') {
        // 处理其他错误
      }
    }
  })();

  // 清理时取消旧请求
  return () => {
    controller.abort();
  };
}, [value1, value2, value3]);

注意：这种方式需要你的异步函数支持接收AbortSignal并在信号触发时终止操作，比如fetch原生支持，自定义函数则需要手动处理。

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