0

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.

1
  • O seu hook vai ser executado toda vez que o setter 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.
    – bfavaretto
    Commented 2/12 às 13:24

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .