React js componente re-renderizar duas vezes no evento scroll [duplicado]

Question

Quero tornar o cabeçalho invisível quando rolar para baixo e quando rolar para cima torná-lo visível

const [showHeaderState, setShowHeaderState] = useState(true);
      const prevScrollpos = useRef(window.pageYOffset);
    
      const handleScroll = () => {
        const currentScrollPos = window.pageYOffset;
        prevScrollpos.current < currentScrollPos
          ? setShowHeaderState(false)
          : setShowHeaderState(true);
        prevScrollpos.current = currentScrollPos;
      };
    
      useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
      }, []);
    
      console.log(showHeaderState);

este código está funcionando

mas quando eu registro o estado de renderização é mostrado que o componente é renderizado duas vezes

em rolar para cima log true duas vezes

na rolagem para baixo log falso duas vezes

qualquer solução ??

Answer 1

Só porque o console.log está em execução não significa que seu componente está realmente renderizando duas vezes, pois o React pode executar partes da função de um componente sem comprometer essas alterações em uma renderização completa. Se você quiser verificar se estão ocorrendo renderizações completas adicionais, coloque um console.log dentro de um gancho de efeito sem dependências (que será executado sempre que ocorrer uma nova renderização):

useEffect(() => { console.log("render") })

E veja quantas vezes ele está logado. Deve ser executado apenas uma vez por mudança de estado.

Essa resposta fornece uma explicação mais completa desse fenômeno.