Reactの関数コンポーネントでstateが更新できない

Question

やりたいこと

MyComponent をレンダー後、画面幅に応じて一度だけ実行したい処理を行い、以降画面幅が変更された時のために初期の画面幅を保持しておきたい

起きていること

最初に一度だけ実行したい処理の最後に画面幅をstateに保存しているのですが、以降の呼び出し時もずっとuseStateで初期化した時の値「0」が呼び出されてしまいます。

コード

function MyComponent() {
  const [lastWinW, setLastWinW] = useState(0);

  // 最初に一度実行したい処理
  const checkWinW = () => {
    if(window.innerWidth > 768){
      // 処理
    } else {
      // 処理
    }

    setLastWinW(window.innerWidth);
  }

  // 幅に変更があった際に実行したい処理
  const onResizeWinW = () => {
    if(lastWinW != window.innerWidth){ // 高さの変更では実行しないように
      console.log(lastWinW); // ログ表示は「0」で、checkWinWでのsetLastWinWが機能していない…？
      // 処理
    }
  }

  useEffect(() => {
    checkWinW();
    window.onresize = onResizeWinW; // 画面幅を変えるとログに「0」が吐き出され続ける
  }, []);

  return (
    // レンダー内容
  )
}

試したこと

stateが即時更新ではないことが原因かと思い、公式ドキュメントやその他のサイトを見つつ、setLastWinWのコールバックに引数としてlastWinWを用いるようにしてみましたが、結果は変わりませんでした。

どうかよろしくお願いします。。。

Answer 1

stateをrenderしたところ更新はされていたので、window.onresize = onResizeWinW;が問題だと思います。（おそらくReactの管理外なのでstateの初期値しか見れていなかったかと）
なので、window.addEventListenerでresize時のeventとして登録しましょう。
また、unmount時にEventListnerは削除しないとWarningが出たと思います。

useEffect(() => {
  checkWinW();
  window.addEventListener("resize", onResizeWinW);
  return () => window.removeEventListener("resize", onResizeWinW);
});

Comments

[aptx4869]

ご回答いただきありがとうございます。
おっしゃるとおり、stateをrenderしてみたら確認ができました。
また、window.addEventListenerでresize時のeventとして登録したところ、期待した挙動にすることができました。
このたびはありがとうございました。