Tengo este gancho de reacción personalizado copiado más o menos directamente de este artículo de dev.to para el uso de IntersecionObserver en React. artículo aquí
El gancho
import { useEffect, useRef, useState } from "react" export const useIntersectionObserver = (options) => { const containerRef = useRef(null) const [isVisible, setIsVisible] = useState(false) const callback = (entries) => { const [entry] = entries setIsVisible(entry.isIntersecting) } useEffect(() => { let currentEl; const observer = new IntersectionObserver(callback, options); if (containerRef && containerRef.current) { currentEl = containerRef.current; observer.observe(currentEl); } return () => { if (containerRef && containerRef.current) { currentEl = containerRef.current; observer.unobserve(currentEl); } } }, [containerRef, options]) return [containerRef, isVisible] }en mi consola tengo este aviso,
Es probable que el valor de referencia 'containerRef.current' haya cambiado para cuando se ejecute esta función de limpieza de efectos. Si esta referencia apunta a un nodo representado por React, copie 'containerRef.current' en una variable dentro del efecto y use esa variable en la función de limpieza react-hooks/exhaustive-deps
¿Puede alguien proporcionar una explicación más detallada de qué significa exactamente esto o indicarme un recurso? Así como la solución para satisfacer el requisito de error. Por lo que puedo ver containerRef.current IS al que se hace referencia dentro de la limpieza useEffect , claramente no tengo una comprensión sólida de lo que realmente está sucediendo aquí.
La advertencia existe porque, en algunos casos, el valor .current al que se hace referencia en el cuerpo de un efecto será diferente del valor .current al que se hace referencia en la función de limpieza. En general, si lo hace
useEffect(() => { // code that references someRef.current return () => { // more code that references someRef.current };es posible que cuente con ambas referencias para hacer referencia al mismo valor, pero eso no está garantizado y, a veces, será una fuente de errores.
En su código, solo hay una línea en el código que arroja el error, que es esta:
return () => { if (containerRef && containerRef.current) { currentEl = containerRef.current; // <-------- observer.unobserve(currentEl); } }Lo cual es razonable: no hay garantía absoluta de que su
currentEl = containerRef.current; observer.observe(currentEl);en el cuerpo del efecto será el mismo elemento no observado en la función de limpieza.
La solución sería extraer el valor .current en una variable en el cuerpo del efecto y hacer referencia a esa variable en la limpieza.
También tenga en cuenta que una referencia siempre será veraz, no es necesario probarla.
useEffect(() => { const currentEl = containerRef.current; if (!currentEl) return; // no need to attach observer or cleanup const observer = new IntersectionObserver(callback, options); observer.observe(currentEl); return () => { observer.unobserve(currentEl); }; }, [containerRef, options])