在 React useEffect 依赖数组中包含函数会导致不需要的函数运行

Question

在我的 React Typescript 应用程序中，我使用 a在发生变化时useEffect进行调用。eventTrackerwallet.address

const wallet = useWallet();
const eventTracker = useAnalyticsEventTracker();

useEffect(() => {
  if (wallet?.address) {
    eventTracker('Wallet', 'Connect', wallet?.address);
    console.log(wallet.address);
  }
}, [wallet]);

我的 IDE 和浏览器控制台都发出警告

React Hook useEffect 缺少依赖项：“eventTracker”。包含它或删除依赖项 array.eslintreact-hooks/exhaustive-deps

我不确定我的方法或 linter 建议是否正确，因为添加eventTracker到依赖项数组会导致传递到的函数useEffect在应用程序启动时运行 10 次，而不是一次。

人们建议在这里做什么？

---

这是钩子：

import ReactGA from 'react-ga';

const useAnalyticsEventTracker = () => {
  const eventTracker = (
    category: string,
    action: string,
    label: string,
  ) => {
    ReactGA.event({ category, action, label });
  };

  return eventTracker;
};

export default useAnalyticsEventTracker;

Answer 1

您的 linter 建议是正确的，您只需应用一些记忆以避免重新渲染。

每次渲染时，eventTracker都会重新创建，因为您调用useAnalyticsEventTracker它会创建一个新的回调。因此，将其包含在依赖项数组中将导致重新触发您的useEffect，因为它不断变化。

您可以通过多种方式解决它。一种方法是使用它useCallback来记忆该函数，这样它只会被创建 1 次：

const useAnalyticsEventTracker = () => {
  const eventTracker = useCallback((
    category: string,
    action: string,
    label: string,
  ) => {
    ReactGA.event({ category, action, label });
  }, [])