React + TypeScriptで要素の高さを取得するcustom hook

子要素が親要素のmax-heightを超えてscrollするときにだけ表示するComponentを書きたかったので、ある要素の高さを取得したかった。
useRef でDOMの要素を参照した上で、custom hook化してあげたらきれいにまとまったのでメモ。

function useElementHeight<T extends HTMLElement>() {
  const heightInspectedEl = useRef<T>(null);
  const [height, setHeight] = useState(0);

  useEffect(() => {
    if (heightInspectedEl?.current) {
      const { height } = heightInspectedEl.current.getBoundingClientRect();
      setHeight(height);
    }
  }, [heightInspectedEl]);

  return [heightInspectedEl, height] as const;
}

学び:

• TypeScriptで useRef(null) としていると heightInspectedEl.current がObject is possibly 'null' と怒られるので型引数をつけられるようにした。
• このままだとWindowサイズが動的に変わったときの対応はできてないので、こういったもの: https://usehooks.com/useWindowSize を利用したり自分で書いたりするとよさそう。