[React] window resizeでリサイズする

シンプルに従来の補法を使ってリサイズする方法

この方法は以前まで自分もよく使っていた方法です。
大事なので、useEffectのretrunでクリーンラップすることです。

  const [WindowHState, setWindowHState] = useState<number>()

  const onChangeBody = () => {
    let timeoutId
    if (timeoutId) return
    timeoutId = setTimeout(() => {
      const H = document.getElementById('l_header').clientHeight
      setWindowHState(window.innerHeight - H - 80)
    }, 500)
  }

  useEffect(() => {
    window.addEventListener('resize', onChangeBody)

    return () => window.removeEventListener('resize', onChangeBody)
  }, [])

  useEffect(() => {
    if (ArrayState === true) {
      const H = document.getElementById('l_header').clientHeight
      googlemapsize.current.style.height = WindowHState
        ? WindowHState + 'px'
        : window.innerHeight - H - 80 + 'px'
    }
  }, [ArrayState, WindowHState])

簡単ではありますが、よかったら是非使ってみてください。