Es bastante fácil agregar detectores de eventos en el componente funcional:
const Component = () => { const handleScroll = () => { // body } useEffect(() => { window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); } }, []) } Pero está bien si handleScroll no cambia. A veces cambia mucho (debido a cambios de accesorios, cambios de estado, etc.) y debe agregarse a la lista de dependencias de useEffect :
useEffect(() => { window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); } }, [handleScroll])¿Es una práctica normal agregar y eliminar detectores de ventana en casi cada representación del componente? Tal vez, ¿es la situación en la que es mejor usar componentes de clase que tienen un estado interno?
Siempre debe pasar handleScroll en la matriz useEffect s deps.
Luego, las formas de limitar la reproducción incluyen envolver handleScroll dentro de useCallback y usar ref s.
Según su ejemplo limitado, no estoy seguro, pero el enfoque de ref en el ejemplo useEventCallback de los documentos de reacción podría ser útil para su situación.
import { useEventCallback } from './myHooks' function Component() { const [myChangingState, changeIt] = useState() const handleScroll = useEventCallback(() => { // body uses `myChangingState` }, [myChangingState] )lo que evitará que se actualice en cada renderizado.