如何解决useEffect添加依赖触发无限重渲染时的穷举依赖警告问题

你遇到的无限循环问题根因为use-query-params默认返回的setQuery更新函数不具备稳定引用，每次组件重渲染都会生成新的函数实例，加入依赖数组后会反复触发useEffect执行，调用setQuery又会触发重渲染，最终形成死循环。

解决方案 #

方案1：使用稳定的更新函数（最推荐）

use-query-params 提供了独立的useSetQueryParam hook，返回的更新函数引用永久稳定，不会随渲染变化，修改代码如下：

import { useQueryParam, useSetQueryParam, withDefault, StringParam } from 'use-query-params';

// 只取query值
const [query] = useQueryParam<string>(
  'query',
  withDefault(StringParam, ''),
);
// 单独获取稳定的set函数
const setQuery = useSetQueryParam('query');

useEffect(() => {
  // 此处替换为你的实际业务逻辑
  setQuery(query);
}, [query, setQuery]); 
// setQuery引用稳定，不会触发循环，同时消除依赖警告

方案2：用useRef封装更新函数

如果你的use-query-params版本较低不支持useSetQueryParam，可以用useRef封装更新函数规避引用不稳定问题：

import { useQueryParam, withDefault, StringParam } from 'use-query-params';
import { useRef, useEffect } from 'react';

const [query, setQuery] = useQueryParam<string>(
  'query',
  withDefault(StringParam, ''),
);
// 用ref存储最新的setQuery引用
const setQueryRef = useRef(setQuery);
// 同步更新ref中的setQuery
useEffect(() => {
  setQueryRef.current = setQuery;
}, [setQuery]);

useEffect(() => {
  setQueryRef.current(query);
}, [query]); 
// 不需要加setQuery到依赖，ref引用永久稳定

方案3：临时忽略ESLint检查（不推荐）

如果你确认当前逻辑不会出现问题的风险极低，也可以添加注释手动忽略依赖检查，仅适用于临时调试场景：

useEffect(() => {
  setQuery(query);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [query]);

注意：你当前示例中的setQuery(query)逻辑属于冗余操作，相当于把当前查询参数值重复设置一遍，无实际业务意义，如果是简化示例可忽略，实际使用时替换为真实业务逻辑即可。

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