En mi aplicación React Typescript, estoy usando useEffect para llamar a eventTracker cada vez que cambia wallet.address .
const wallet = useWallet(); const eventTracker = useAnalyticsEventTracker(); useEffect(() => { if (wallet?.address) { eventTracker('Wallet', 'Connect', wallet?.address); console.log(wallet.address); } }, [wallet]);Tanto mi IDE como la consola del navegador están dando la advertencia
React Hook useEffect tiene una dependencia faltante: 'eventTracker'. Inclúyalo o elimine la matriz de dependencias.eslintreact-hooks/exhaustive-deps
No estoy seguro de que mi enfoque o la sugerencia de linter sean correctos, porque agregar eventTracker a la matriz de dependencia hace que la función pase a useEffect para ejecutarse 10 veces cuando se inicia la aplicación, en lugar de solo una vez.
¿Qué recomienda la gente que se haga aquí?
Aquí está el gancho:
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;Su sugerencia de linter es correcta, solo tiene que aplicar algo de memorización para evitar volver a renderizar.
En cada procesamiento, eventTracker se vuelve a crear porque llama a useAnalyticsEventTracker que crea una nueva devolución de llamada. Por lo tanto, tenerlo incluido en la matriz de dependencias provocará que su useEffect se vuelva a activar, ya que sigue cambiando.
Puedes resolverlo de muchas maneras. Una forma es usar useCallback para memorizar esta función, por lo que se creará solo 1 vez:
const useAnalyticsEventTracker = () => { const eventTracker = useCallback(( category: string, action: string, label: string, ) => { ReactGA.event({ category, action, label }); }, [])Como dijo Barak, el eventTracker se recrea en cada renderizado. El efecto de uso obtiene esta versión inicial de la función que se descarta en cada renderizado.
Agregarlo como una dependencia activaría el efecto de uso en cada renderizado.
Alternativamente, para la memorización, puede importar useAnalyticsEventTracker y llamarlo en lugar de declarar y llamar a eventTracker. De esa manera la función no se actualiza. ¡Espero que ayude!