Estou criando um componente em React que adiciona um evento de rolagem para verificar se a página está no topo. No entanto, percebi que a função handleScroll continua sendo chamada mesmo após o componente ser desmontado. Aqui está o meu código:
useEffect(() => {
const handleScroll = () => {
if (window.scrollY === 0) {
setIsTopOfPage(true);
} else {
setIsTopOfPage(false);
}
};
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
Mesmo após a desmontagem do componente, o evento de rolagem continua sendo disparado. O que estou fazendo errado? Há algo relacionado ao escopo ou às dependências do useEffect?
Informações adicionais:
Estou usando React 18. A função handleScroll não parece mudar durante o ciclo de vida. Testei com dependências no useEffect, mas o comportamento persiste. Agradeço qualquer ajuda!
Adicionei um array de dependências vazio [] no useEffect, esperando que ele funcionasse como componentDidMount e componentWillUnmount. Tentei adicionar handleScroll como dependência no useEffect ([handleScroll]), caso a função estivesse sendo redefinida em cada renderização. Verifiquei se a função de limpeza (removeEventListener) estava sendo chamada corretamente quando o componente era desmontado.
setIsTopOfPage
mudar. Tente colocá-lo como dependência. Tente também omitir completamente o array de dependências, o que fará o hook executar toda vez que o componente for renderizado.