Including function in React useEffect Dependency Array causes Unwanted Function Runs

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;

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 });
  }, [])