useParams加入useEffect依赖数组后，页面resize时重复执行问题

React Router的useParams()每次组件渲染时，返回的params对象都是新的引用——哪怕参数值完全没变。当页面resize触发组件重渲染时，新的params对象会被useEffect判定为依赖项变化，从而重复执行内部逻辑。

解决方法很直接：

• 不要把整个params对象放进依赖数组，改用params里的具体字段（比如params.id），这样只有当id的实际值变化时，才会触发useEffect。
• 同时记得把useEffect内部用到的所有变量都加入依赖数组，避免遗漏导致的逻辑异常。

修改后的代码如下：

import { useParams } from "react-router-dom";

const params = useParams();
    
useEffect(() => {
  if (
    (params.id && !video) ||
    (!!params.id && !!video && params.id !== video?._id)
  ) {
    dispatch(addViewVideo({ _id: params.id }));
    dispatch(getVideo({ _id: params.id }));
  }
}, [params.id, video, dispatch]);

这样调整后，页面resize时因为params.id的值没变化，useEffect就不会被无意义触发，只有当路由id真正改变或者video状态更新时，才会执行对应的dispatch逻辑。

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