effect event.tsx

export function Component() {
  const [something, setSomething] = useState();

  /* ... */

  const trackSomething = useCallback(() => {
    track("something", { something.email })
  }, [something]);

  useEffect(() => {
    if (
      fetcher.data?.message === I_WANT_TO_TRACK_WHEN_THIS_HAPPENS &&
      checkoutFetcherType === "done"
    ) {
      trackSomething();
    }
    /* eslint-disable-next-line react-hooks/exhaustive-deps --
     * We don't want to re-run this effect each time `something` changes
     *
     * This could be solved with an effect event in the future:
     * - https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
     *
     * Enable the rule before making any changes to this effect to ensure
     * that the only dep missing is `trackSomething`
     */
  }, [checkoutFetcherType, fetcher.data?.message]);

  /* ... hundreds of lines with a lot of effects without correct deps T.T */
}