Considere el siguiente ejemplo (lo escribí de memoria, por lo que podría tener algunos problemas):
export function App(props) { const [howManyTimesUserHasDraggedMap, setHowManyTimesUserHasDraggedMap] = useState(0); const [mapCenter, setMapCenter] = useState<LatLng>(new LatLng(0, 0)); const [shouldLog, setShouldLog] = useState(true); const handleCenterChange = (newCenter: LatLng) : void => { setMapCenter(newCenter); } useEffect(() => { setHowManyTimesUserHasDraggedMap((prev) => prev + 1); if(shouldLog) console.log('Updated map drag count'); } [mapCenter]); return ( <MapComponent onCenterChange={handleCenterChange} /> ); } El punto aquí es que tenemos, por ejemplo, un componente llamado Map que muestra Google Maps en un modal y el usuario puede interactuar con el mapa arrastrándolo y acercándolo.
Digamos que quiero hacer un seguimiento de cuántas veces el usuario ha arrastrado el mapa, que es básicamente lo mismo que cambiar el centro del mismo. El componente Map toma la propiedad onCenterChange y le doy una función que actualiza el estado de mapCenter con el newCenter cada vez que cambia el centro.
Ahora, este ejemplo es un poco tonto (podría hacer todo esto en handleCenterChange , pero eso no viene al caso), pero por alguna razón quiero usar useEffect aquí para incrementar la cantidad de arrastres cada vez que cambia el estado de mapCenter , así que puse mapCenter a la matriz de dependencia porque parece lo lógico. También tengo una declaración if que verifica si shouldLog es verdadero y console.logs algo irrelevante para la consola si es así.
Ahora, el problema aquí es que las dependencias para ese useEffect no son exhaustivas, ya que shouldLog no se encuentra en la matriz de dependencias y recibo advertencias de izquierda a derecha. Luego voy a leer algo de documentación y hay advertencias y alertas en todas partes para SIEMPRE INCLUIR TODAS LAS DEPENDENCIAS.
Pero eso realmente no tiene sentido aquí ahora, ¿verdad? ¿Por qué debería activar ese useEffect si mi shouldLog de registro debería cambiar? Eso no significa que el mapCenter haya cambiado. El valor de shouldLog solo es relevante si el centro cambia.
Mi entendimiento actual es que puedo usar useEffect para suscribirme básicamente a ciertos eventos, como cuando el componente se monta, cuando el componente se desmonta, cuando el componente se vuelve a renderizar o cuando cambia algo en la matriz de dependencia. Entonces, en este caso, me estoy suscribiendo a un evento que se activa cuando cambia mapCenter y es entonces cuando debería activarse. Sin embargo, cuando se activa el evento, simplemente verifica qué debe hacer con respecto al registro, pero el cambio en el registro no es una razón para activar el evento.
Entonces, ¿mi comprensión es completamente incorrecta aquí o qué está pasando?