Reactjsコンポーネントはスクロールイベントで2回再レンダリングします[重複]

Aug 22 2020

下にスクロールしたときにヘッダーを非表示にし、上にスクロールしたときにヘッダーを表示したい

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

このコードは機能しています

しかし、レンダリング状態をログに記録すると、それは2回レンダリングされたコンポーネントです。

スクロールアップログ2回true

スクロールダウンログfalseを2回

任意の解決策??

回答

ChrisB. Aug 22 2020 at 05:41

console.logが実行されているからといって、コンポーネントが実際に2回レンダリングされているわけではありません。これは、Reactが完全なレンダリングでこれらの変更をコミットせずに、コンポーネントの関数の一部を実行できるためです。追加の完全なレンダリングが発生しているかどうかを確認する場合は、依存関係のないエフェクトフック内にconsole.logを配置します(再レンダリングが発生するたびに実行されます)。

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

そして、それがログに記録される回数を確認します。状態の変化ごとに1回だけ実行する必要があります。

この答えは、この現象のより完全な説明を提供します。