React useEffect依赖未变更仍重复执行（router.query）问题求助

问题根源 #

你遇到的循环来自两个核心原因：

1. router.query 是引用类型，每次组件渲染时可能生成新的对象实例（即使内容完全一致），导致useEffect判定依赖项"变化"，触发执行。
2. useEffect内调用setFilters更新状态，引发组件重渲染，进而再次触发useEffect，形成闭环。

解决方案 #

1. 精准监听具体的query字段，而非整个对象 #

不要直接把router.query作为依赖，而是监听你实际需要的单个字段（比如router.query.status）。只有当该字段的值真正变化时，才触发useEffect。

修改后的代码：

useEffect(() => {
   console.log('apply filter');    
   const newFilters = {
     status: {
       values: { label: router.query.status, value: router.query.status },
     },
     // 其他过滤属性...
   };    
   setFilters(newFilters);
}, [router.query.status]); // 仅监听具体变化的字段

如果需要监听多个query参数，只需把它们都加入依赖数组：

}, [router.query.status, router.query.type, router.query.keyword]);

2. 增加状态更新的条件判断 #

即使监听了具体字段，也可以通过判断新状态和当前状态是否一致，避免不必要的setFilters调用，减少重渲染次数。

示例代码（针对具体字段比较）：

useEffect(() => {
   const currentStatus = router.query.status;
   // 初始无值时直接返回，避免无效执行
   if (!currentStatus) return;

   // 仅当status与当前filters中的值不同时，才更新状态
   if (filters.status?.values.value !== currentStatus) {
     setFilters(prevFilters => ({
       ...prevFilters,
       status: {
         values: { label: currentStatus, value: currentStatus },
       },
     }));
   }
}, [router.query.status, filters]);

3. 处理初始渲染的空query情况 #

如果使用的是Next.js等框架的路由，router.query在初始渲染时可能为空对象或undefined，可以先判断参数是否存在再执行逻辑，避免无意义的触发：

useEffect(() => {
   const { status } = router.query;
   if (!status) return;

   console.log('apply filter');    
   setFilters({
     status: {
       values: { label: status, value: status },
     },
     // 其他过滤属性...
   });
}, [router.query.status]);

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