React函数组件：MobX store与useTranslation的TFunction是否需加入useEffect依赖？

嘿，作为React新手遇到这种依赖规则的冲突确实挺头疼的，我帮你拆解这两个问题，给出不用全局禁用或逐行忽略的优雅方案：

一、MobX Store的依赖警告处理 #

首先得明确为什么MobX文档说不用把store加入依赖数组：

• MobX的响应式是通过追踪**可观察状态（observables）**来触发组件更新的，而不是依赖数组的变化。
• 你的MobX Store通常是全局单例或者通过Context提供的稳定引用，不会在组件生命周期内发生引用变化。

要针对性消除这个lint警告，最优雅的方式是封装自定义hook并配置ESLint规则：

1. 先封装一个获取store的自定义hook：

// hooks/useStore.js
import { useContext } from 'react';
import { MobXStoreContext } from '../store/context'; // 假设你用Context管理store

export function useStore() {
  return useContext(MobXStoreContext);
}

2. 在ESLint配置文件（比如.eslintrc.js）中，告诉react-hooks/exhaustive-deps规则，这个自定义hook返回的是稳定引用，无需检查依赖：

module.exports = {
  // ...其他配置
  rules: {
    'react-hooks/exhaustive-deps': ['warn', {
      additionalHooks: 'useStore' // 把你的自定义hook名加在这里
    }]
  }
};

这样以后在组件里用const store = useStore()，即使在useEffect或useCallback里使用store，ESLint也不会再提示依赖缺失了，完全不需要逐行注释。

二、useTranslation返回的TFunction是否需要加入依赖？ #

答案是建议加入，原因如下：

• useTranslation返回的t函数是记忆化的，只有当语言切换、namespace变化时才会更新引用。
• 如果你的useEffect或useCallback里用到了t来翻译文本，加入依赖能保证当语言变化时，相关逻辑会重新执行，更新翻译后的内容。
• 不用担心性能问题：因为t的引用在语言不变时是稳定的，不会导致不必要的重渲染或effect重复执行。

如果lint提示这个依赖缺失，直接把t加入依赖数组就好，这完全符合React hooks的设计原则，也不会带来额外问题。

总结 #

• MobX Store：通过自定义hook+ESLint规则配置，从根源上消除特定依赖警告，不用破坏代码规范。
• TFunction：直接加入依赖数组，既符合React规则，又能保证多语言切换时的逻辑正确性。

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