React Hook useEffect缺失i18n依赖的合规解决方式咨询

首先明确：如果你的i18n是全局单例（比如i18next默认导出的实例），直接把依赖数组更新为[i18n]是最合规且简单的方案。

为什么可以这么做？ #

全局导入的i18n实例是单例，不会在组件渲染时被重复创建，所以依赖数组里加i18n不会导致useEffect频繁执行——它只会在组件挂载时绑定事件，卸载时解绑，完全符合预期。这样既解决了ESLint警告，又没有引入额外复杂度。

其他场景的处理 #

如果i18n是从props传入的，且可能随父组件更新而变化：

• 依然可以把i18n加入依赖数组。当i18n实例变化时，useEffect会先执行清理函数解绑旧实例的事件，再绑定新实例的事件，避免内存泄漏，这是正确的行为。

如果确实需要避免依赖数组中出现i18n（比如你能100%确定它不会变化，但不想加依赖），可以用useRef缓存实例：

const i18nRef = useRef(i18n);

useEffect(() => {
  const onLanguageChange = () => {
    setLanguageChanged(true);
  };

  const currentI18n = i18nRef.current;
  currentI18n.on('languageChanged', onLanguageChange);

  return () => {
    currentI18n.off('languageChanged', onLanguageChange);
  };
}, []);

但这种写法不如直接加依赖清晰，除非有特殊需求，否则优先推荐第一种方案。

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