React useEffect依赖配置引发API重复调用问题咨询

1. 忽略该ESLint报错是否会产生隐患？ #

• 会存在明确的陈旧闭包风险，这个警告不是无意义的格式要求。你当前的useEffect逻辑中读取了currentPage、noOfRecords、currentOrg、dispatch等多个外部作用域变量，如果仅将searchText放入依赖数组，当搜索触发effect执行时，很可能捕获到之前渲染周期留存的旧值，比如用户已经切换到第3页、修改了每页展示条数后再输入搜索关键词，请求仍会携带旧的分页参数，返回不符合预期的数据。
• 你当前遇到的接口重复调用问题，本质是请求触发逻辑拆分在了两个位置：分页变更回调里直接调用一次接口，currentPage更新后又触发useEffect再调用一次，问题根源不是ESLint的依赖规则，靠忽略报错绕开只是把潜在的参数错误bug藏了起来，没有解决根本问题。

2. React依赖规则的设计原因，以及对应场景的正确处理方式 #

规则设计原因 #

useEffect的依赖数组本质是effect逻辑和外部响应式状态的同步契约：React会在依赖数组中任意值发生变化时重新执行effect，保证effect内部用到的所有值和当前渲染周期的最新值一致，从机制上避免闭包捕获旧值导致的各类难调试bug。ESLint的exhaustive-deps规则就是帮你自动检查漏写的依赖，提前规避这类问题。

如果不希望某个变量变化时触发effect重跑，同时还要避免陈旧值问题，不要靠漏写依赖实现，推荐按以下方案处理：

针对当前分页+搜索场景的最优方案：收敛请求触发入口 #

不要把接口调用逻辑拆分在分页回调和useEffect两个地方，将所有会触发列表刷新的参数（分页参数、搜索关键词、组织ID）统一作为状态管理，所有参数变更都通过同一个useEffect触发接口请求，从根源上避免重复调用和依赖问题：

// 统一管理所有列表请求参数
const [searchText, setSearchText] = useState("");
const [pageSize, setPageSize] = useState(10);
const [pageNo, setPageNo] = useState(1);

// 所有参数变化统一在该effect中触发请求
useEffect(() => {
  if (!currentOrg?.id) return;
  dispatchGetSubOrgs(
    dispatch,
    currentOrg.id,
    pageSize,
    pageNo,
    searchText
  );
  // 所有effect内用到的外部值全部加入依赖，无ESLint警告
}, [currentOrg?.id, pageSize, pageNo, searchText, dispatch]);

// 分页组件回调仅修改分页状态，不直接调用接口
<Pagination 
  onPaginationChange={(newPageSize, newPageNo) => {
    setPageSize(newPageSize);
    setPageNo(newPageNo);
  }}
/>

// 搜索输入回调仅修改搜索状态，搜索时重置页码到第一页
const handleSearchInput = (val) => {
  setSearchText(val);
  setPageNo(1);
}

这种写法完全符合React单向数据流的设计逻辑，不会出现重复调用问题，也不存在陈旧闭包风险，后续新增筛选条件时只需要新增对应状态、加入依赖数组即可，维护成本极低。

通用场景方案：用ref存储不需要触发effect的最新值 #

如果遇到确实不需要某个变量变化时触发effect、但需要始终读取该变量最新值的场景，可以通过useRef存储变量的最新值——ref的变更不会触发组件重渲染和effect重跑，每次渲染时同步最新值到ref，effect中读取ref的current属性即可拿到最新值，不会触发ESLint依赖警告：

// 用ref存储不需要触发effect的变量
const currentPageRef = useRef(currentPage);
// 每次渲染同步最新值到ref
currentPageRef.current = currentPage;

useEffect(() => {
  if (currentOrg) {
    dispatchGetSubOrgs(
      dispatch,
      currentOrg.id,
      noOfRecords,
      currentPageRef.current, // 读取ref上的最新值，不需要加入依赖数组
      searchText,
    );
  }
}, [searchText, currentOrg, noOfRecords, dispatch]);

注意：该方案仅适合变量变化确实不需要触发逻辑重跑的场景，你当前的分页+搜索场景更推荐上面的收敛入口方案，逻辑更清晰不易出错。

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