如何优雅地处理useEffect中依赖状态在执行期间更新的问题

在React函数组件开发过程中，useEffect是处理数据请求、事件监听、定时器等副作用逻辑的核心Hook。当useEffect的依赖状态在执行副作用的过程中被更新时，很容易出现副作用逻辑重复执行、旧状态引用错误、异步操作结果覆盖新状态等问题，影响组件的稳定性。

问题产生的常见场景

最常见的场景是useEffect中发起异步数据请求，在请求返回之前，依赖的请求参数状态被用户修改，此时旧请求返回的结果会覆盖新的参数对应的正确结果。比如下面的示例：

import { useState, useEffect } from 'react';

function UserList() {
  const [userId, setUserId] = useState(1);
  const [userInfo, setUserInfo] = useState(null);

  useEffect(() => {
    // 发起异步请求获取用户信息
    fetch(`https://api.ipipp.com/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        // 如果userId在请求期间被修改，这里会设置旧userId对应的数据
        setUserInfo(data);
      });
  }, [userId]); // userId是依赖项

  return (
    <div>
      <button onClick={() => setUserId(2)}>切换用户</button>
      {userInfo ? <p>{userInfo.name}</p> : <p>加载中</p>}
    </div>
  );
}

当用户快速点击切换用户按钮时，第一次请求的返回结果可能会晚于第二次请求，最终页面显示的是第一个用户的信息，而不是最新的第二个用户的信息。

方案一：使用清理函数取消未完成的操作

useEffect可以返回一个清理函数，当组件卸载或者依赖项更新导致副作用重新执行时，会先执行上一次副作用的清理函数。我们可以利用这个特性取消未完成的异步操作。

如果是使用fetch发起请求，可以结合AbortController实现请求取消：

import { useState, useEffect } from 'react';

function UserList() {
  const [userId, setUserId] = useState(1);
  const [userInfo, setUserInfo] = useState(null);

  useEffect(() => {
    // 创建AbortController实例
    const controller = new AbortController();
    const signal = controller.signal;

    // 发起可取消的请求
    fetch(`https://api.ipipp.com/users/${userId}`, { signal })
      .then(res => res.json())
      .then(data => {
        setUserInfo(data);
      })
      .catch(err => {
        // 如果是取消请求导致的错误，不做处理
        if (err.name !== 'AbortError') {
          console.error('请求失败', err);
        }
      });

    // 返回清理函数，取消未完成的请求
    return () => {
      controller.abort();
    };
  }, [userId]);

  return (
    <div>
      <button onClick={() => setUserId(2)}>切换用户</button>
      {userInfo ? <p>{userInfo.name}</p> : <p>加载中</p>}
    </div>
  );
}

如果是定时器或者自定义异步操作，可以在清理函数中设置标记位，判断是否需要执行后续的状态更新：

import { useState, useEffect } from 'react';

function TimerComponent() {
  const [count, setCount] = useState(0);
  const [intervalVal, setIntervalVal] = useState(1000);

  useEffect(() => {
    let isActive = true; // 标记副作用是否仍然有效
    const timer = setInterval(() => {
      if (isActive) {
        setCount(prev => prev + 1);
      }
    }, intervalVal);

    // 清理函数，清除标记位和定时器
    return () => {
      isActive = false;
      clearInterval(timer);
    };
  }, [intervalVal]);

  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={() => setIntervalVal(500)}>加快计时</button>
    </div>
  );
}

方案二：使用useRef保存最新状态

useRef创建的引用在组件的整个生命周期中保持不变，我们可以通过useRef保存最新的状态值，避免useEffect闭包捕获旧状态的问题。这种方式适合不需要取消操作，只需要获取最新状态的场景。

import { useState, useEffect, useRef } from 'react';

function UserList() {
  const [userId, setUserId] = useState(1);
  const [userInfo, setUserInfo] = useState(null);
  // 用ref保存最新的userId
  const userIdRef = useRef(userId);

  // 每次userId更新时，同步更新ref的值
  useEffect(() => {
    userIdRef.current = userId;
  }, [userId]);

  useEffect(() => {
    const currentUserId = userIdRef.current;
    fetch(`https://api.ipipp.com/users/${currentUserId}`)
      .then(res => res.json())
      .then(data => {
        // 请求返回时，对比当前ref中的userId和请求时的userId
        // 如果一致才更新状态，避免旧请求覆盖新数据
        if (userIdRef.current === currentUserId) {
          setUserInfo(data);
        }
      });
  }, [userId]);

  return (
    <div>
      <button onClick={() => setUserId(2)}>切换用户</button>
      {userInfo ? <p>{userInfo.name}</p> : <p>加载中</p>}
    </div>
  );
}

方案三：合理调整依赖数组配置

如果某些状态更新不需要触发副作用重新执行，可以考虑将其从依赖数组中移除，同时通过其他方式保证状态的正确性。不过这种方式需要谨慎使用，避免违反React的Hook规则导致难以排查的问题。

比如如果某个状态只是用于组件内部的临时计算，不需要触发副作用重新执行，可以将其用useRef保存，避免加入依赖数组：

import { useState, useEffect, useRef } from 'react';

function SearchComponent() {
  const [searchKey, setSearchKey] = useState('');
  // 用ref保存搜索关键词，不加入useEffect依赖
  const searchKeyRef = useRef(searchKey);

  const handleSearch = () => {
    searchKeyRef.current = searchKey;
    // 触发搜索逻辑
  };

  useEffect(() => {
    // 这里使用ref中的最新值，不需要将searchKey加入依赖
    const key = searchKeyRef.current;
    if (key) {
      fetch(`https://api.ipipp.com/search?key=${key}`)
        .then(res => res.json())
        .then(data => {
          console.log('搜索结果', data);
        });
    }
  }, []); // 依赖数组为空，只在组件挂载时执行一次

  return (
    <div>
      <input
        value={searchKey}
        onChange={(e) => setSearchKey(e.target.value)}
      />
      <button onClick={handleSearch}>搜索</button>
    </div>
  );
}

不同方案的适用场景

我们可以通过下面的表格快速选择适合的处理方案：

在实际开发中，我们可以结合具体的业务场景选择合适的方案，也可以将多种方案结合使用，最大程度保证useEffect中副作用逻辑的稳定性，避免依赖状态更新带来的各类问题。

useEffectReact依赖状态更新清理函数useRef修改时间：2026-07-18 17:00:33