Including function in React useEffect Dependency Array causes Unwanted Function Runs

Question

In my React Typescript app, I am using a useEffect to call eventTracker whenever wallet.address changes.

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

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

Both my IDE and browser console are giving the warning

React Hook useEffect has a missing dependency: 'eventTracker'. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps

I am unsure either my approach or the linter suggestion is correct, because adding eventTracker to the dependency array causes the function passed into useEffect to run 10 times when the application starts, instead of just once.

What do folks recommend be done here?

Here's the hook:

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;

Does `useAnalyticsEventTracker` call an external system, such as a database or external API? — PsiKai, Jul 06 '22 at 22:44
@PsiKai Yes, it calls an external API (e.g. google analytics) — gameveloster, Jul 06 '22 at 22:46

score 5 · Accepted Answer · answered Jul 06 '22 at 23:19

Your linter suggestion is correct, you just have to apply some memoization to avoid re-rendering.

Upon each render, eventTracker is re-created because you call useAnalyticsEventTracker that creates a new callback. Therefore, having it included in the dependency array will cause re-triggers of your useEffect, as it keeps changing.

You can solve it in many ways. One way is to use useCallback in order to memoize this function so it will be created only 1 time:

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

score 1 · Answer 2 · answered Jul 06 '22 at 23:37

Like Barak said the eventTracker is recreated each render. The useffect get this initial version of the function which is being discarded each render.

Adding it as a dependency would trigger the use effect each render.

Alternatively, to memoization you could import useAnalyticsEventTracker & call it instead of declaring and calling eventTracker. That way the function is not being updated. Hope that helps!

Including function in React useEffect Dependency Array causes Unwanted Function Runs

2 Answers2