Hola, solo trato de aprender sobre ganchos dentro de un proyecto Next.JS. Ha implementado un useEffect para escuchar el comportamiento de desplazamiento con el objetivo de mostrar contenido diferente en un encabezado si se desplaza la página.
const [ scrollY, setScrollY ] = useState(0); useEffect(() => { const handleScroll = () => { setScrollY(window.scrollY); }; handleScroll(); window.addEventListener("scroll", handleScroll); return () => { window.removeEventListener("scroll", handleScroll); }; }, []);Entonces solo tengo algo como
<div className={scrollY > 20 ? 'scrolled': null}>
Esto funciona para su propósito, pero un efecto no deseado es que el desplazamiento ahora también activa todo en el componente, por lo que, por ejemplo, si tengo console.logs out with the useEffect, se activarían en cada desplazamiento de la página. ¿Es posible que mi UE actualice puramente el estado scrollY?
Ejemplo de un problema sería:
const [ scrollY, setScrollY ] = useState(0); const test = "test"; console.log(test); useEffect(() => { const handleScroll = () => { setScrollY(window.scrollY); }; handleScroll(); window.addEventListener("scroll", handleScroll); return () => { window.removeEventListener("scroll", handleScroll); }; }, []);La prueba se registraría repetidamente en cada pergamino.
Se activará muchas veces, porque cada vez que se desplaza, se llamará al componente de función y la vista se actualizará.
Usas Estado en tu Componente. Cuando llama a setScrollY() , está actualizando el estado, lo que activa una nueva representación de su componente.
Si desea usar console.log para registrar el valor de scrollY , puede hacerlo cuando configura scrollY en lugar de en cada ejecución. También debe preguntarse si scrollY debe almacenarse como estado y, de ser así, por qué.
Sugeriría poner la lógica del encabezado dentro del controlador de desplazamiento.
Al igual que:
const [ isScrolled, setIsScrolled ] = useState(false); ... const handleScroll = () => { if (window.scrollY > 20 && !isScrolled) { setIsScrolled(true); } if (window.scrollY <= 20 && isScrolled) { setIsScrolled(false); } }; ... <MyComponent attribute={isScrolled && 'scrolled'} />Esto reducirá drásticamente la cantidad de renderizados al establecer el estado cada vez que la posición de desplazamiento alcance el punto requerido.