変化するelementのサイズを取得するためのResizeObserver

はじめに

サイズが決まっていない<div>要素を検知するための方法を調べていくうちにResizeObserverというAPIを知ったので簡単にまとめます。

便利だと思ったケース

例えば<Component />の高さ(height)が可変だった場合に、その値変数で持っておきたい（さらに値の変化をリアルタイムで監視したい）場合に以下のように書けます。

const Container = () => {
    const ref = useRef(null)
    const [height, setHeight] = useState()
    React.useEffect(() => {
        const elem = ref.current
        const observer = new ResizeObserver(() => {
             setHeight(elem.offsetHeight)
        })
    
        if (elem) {
             observer.observe(elem)
        }
    
        return () => {
            if (elem) {
                observer.unobserve(elem)
            }
        }
    }, []);
    return (
        <div>
            <Component ref={ref} />
        </div>
    )
}

ざっくり説明

1. useRefでComponentを参照
2. ResizeObserver.observeでComponentのサイズ変化を検知
3. useStateでheightを保持させて、変更があった場合は再レンダリングする（useRefは値の変化があっても再レンダリングされない）

さいごに

最初にuseStateの引数配列の中にref.current.offsetHeightを入れて実装していたのですが、うまくいかなかったので調べていくうちにこの方法に辿り着きました。