React js component re-render due volte in scroll event [duplicate]

Question

Voglio rendere invisibile l'intestazione quando scorro verso il basso e quando scorro verso l'alto renderla visibile

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);

questo codice funziona

ma quando registro lo stato di rendering è mostrato che è il componente renderizzato due volte

su scroll up log true due volte

sullo scorrimento verso il basso log false due volte

qualche soluzione ??

Answer 1

Solo perché console.log è in esecuzione non significa che il tuo componente stia effettivamente eseguendo il rendering due volte, poiché React può eseguire parti della funzione di un componente senza applicare tali modifiche in un rendering completo. Se vuoi controllare se si stanno verificando ulteriori rendering completi, posiziona un console.log all'interno di un effetto hook senza dipendenze (che verrà eseguito ogni volta che si verifica un nuovo rendering):

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

E guarda quante volte viene registrato. Dovrebbe essere eseguito solo una volta per cambio di stato.

Questa risposta fornisce una spiegazione più completa di questo fenomeno.