useLayoutEffectによるDOM要素の測定

element.getBoundingClientRect()は、ビューポートを基準とした要素のサイズと位置を含むDOMRectオブジェクトを返します。含まれる値はtop、right、bottom、left、width、heightです。正確な値を返すためにブラウザにレイアウト計算を実行させるため、呼び出しは必要最小限にしてください。

useEffect内でgetBoundingClientRect()を読み取ると、その時点ですでにブラウザのペイントが完了しています。その後、測定結果に基づいてstateを設定すると、Reactが再レンダーし、ブラウザがもう一度ペイントします。2回目のペイントで修正されるまで、要素が一時的に誤った位置やサイズで表示される可能性があります。

useLayoutEffectで測定値を読み取る処理は、DOMの変更後かつペイント前に行われます。測定によってstateが更新されると、Reactは同期的に再レンダーして修正済みのDOMをコミットします。これらはすべてブラウザが何もペイントする前に行われるため、ユーザーには1回のペイントサイクルで最終的な正しい結果だけが表示されます。

ツールチップはトリガーとなる要素の近くに表示する必要があります。useLayoutEffect内でgetBoundingClientRect()を使ってトリガー要素の位置を測定し、ツールチップの絶対位置を計算して、その位置をstateに設定してください。最初のペイントからツールチップが正しい位置に表示されるため、誤った初期位置から目に見えて移動することがありません。

要素を本来の（制約のない）サイズから固定サイズへアニメーションさせるには、制約を適用する前に本来のサイズを知る必要があります。useLayoutEffectでアニメーション用のスタイルを適用する前に要素の高さを読み取り、stateに保存してから、CSSトランジションの開始キーフレームの値として使用してください。

ページに固定ヘッダーがある場合、本文コンテンツがヘッダーの背後に隠れないよう、ヘッダーの高さと同じ上部パディングが必要です。refを使い、useLayoutEffect内でheaderRef.current.getBoundingClientRect().heightによってヘッダーの高さを測定します。これをコンテンツコンテナのpaddingTopに設定してください。最初のレンダーからレイアウトが正しくなります。

useLayoutEffect内でsetStateを呼び出すと、Reactは同じ同期処理ブロック内で、もう一度レンダーとコミットのサイクルを直ちに実行します。この再レンダーではuseLayoutEffectも再度実行されます。無限ループを作らないよう注意してください。新しい測定値が現在のstateの値と異なる場合にだけ、stateを更新します。

サーバー上にはDOM要素が存在しないため、getBoundingClientRect()は例外を投げるか、0を返します。useLayoutEffectを次のチェックでガードしてください。if (typeof window === 'undefined') return;SSRアプリでは、プレースホルダーのサイズでハイドレーションし、クライアント側でハイドレーション後に測定する必要がある場合があります。

useLayoutEffectによる1回限りの測定では、マウント時のサイズしか取得できません。ウィンドウのリサイズ、動的なコンテンツ、CSSの変更などによる要素のサイズ変化を追跡するには、代わりにResizeObserverを使用してください。要素のサイズが変化するたびにコールバックを実行するため、レスポンシブなコンポーネントに適しています。

複数のエフェクトで同じ測定値が必要な場合は、1回だけ計算し、コンテキストで共有するかpropsとして渡してください。複数のuseLayoutEffect呼び出しで同じgetBoundingClientRect()の値を計算すると、同期的なレイアウト読み取りが複数回発生し、それぞれに比較的大きなコストがかかります。可能な場合は測定をまとめてください。

refはエフェクトが実行される前に設定されます。useLayoutEffectが実行される時点では、ref.currentがDOM要素を指していることが保証されています。そのため、次のパターンが機能します。useLayoutEffect(() => { const rect = ref.current.getBoundingClientRect(); ... }, [])マウント済みのコンポーネントでは、レイアウトエフェクト内でrefがnullになることはありません。

getBoundingClientRect()はuseLayoutEffect内で使用し、DOMの変更後かつペイント前にDOMの測定値を読み取ります。これらの測定結果によるstate更新は、同じペイントに含まれる同期的な再レンダーを引き起こすため、ちらつきを防げます。typeof windowのチェックでSSRに対応してください。継続的にサイズを追跡する場合は、ResizeObserverを優先してください。