useEffect依赖自定义Hook时：依赖项该解构还是不解构？

这个问题反复被提及，即便咨询专家也常得到复杂晦涩的解释，始终没有明确答案：当useEffect依赖于某个自定义Hook的返回值时，编写依赖列表的正确方式是什么？是解构出用到的变量传入，还是直接传入整个Hook返回值？

两种常见写法 #

解构写法 #

const myHookContext = useFooHook();
const { variable1, variable2 } = myHookContext;
useEffect(() => {
    if (variable1 === ...) // 执行相关逻辑
  }, 
  [ variable1, variable2 ]
);

不解构写法 #

const myHookContext = useFooHook();
useEffect(() => {
       if (myHookContext.variable1 === ...) // 执行相关逻辑
   },
   [ myHookContext ]
);

核心分析与结论 #

使用解构写法时，ESLint会报错提示依赖项不正确，应包含myHookContext——这个提示并非错误，核心原因在于：
自定义Hook的返回值若为引用类型（比如对象），每次组件渲染时，即便内部的variable1和variable2未变化，Hook也可能返回新的对象引用。

此时解构写法存在潜在问题：

• 若Hook内部其他状态变更导致返回对象引用变化，但variable1/variable2未变，useEffect不会触发，可能遗漏必要逻辑；
• ESLint的react-hooks/exhaustive-deps规则只能基于语法层面检测，无法判断自定义Hook的内部实现，因此会提示补全依赖。

针对不同场景的正确做法：

• 若Hook返回稳定引用：如果自定义Hook内部用useMemo缓存了返回对象，且你确定只用到variable1和variable2，解构写法可行，可通过// eslint-disable-next-line react-hooks/exhaustive-deps忽略ESLint提示，但需明确Hook实现无意外引用变更；
• 不确定Hook实现或引用不稳定：直接传入整个myHookContext作为依赖更安全，虽可能导致useEffect不必要触发，但能保证逻辑正确性，避免依赖缺失的bug；
• 最优方案：修改自定义Hook，让其返回单独的状态值而非对象，这样可精准传入所需依赖，同时规避引用类型问题：

const [variable1, variable2] = useFooHook();
useEffect(() => {
    if (variable1 === ...) // 执行相关逻辑
  }, 
  [ variable1, variable2 ]
);

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