React useLayoutEffect — ペイント前のDOM測定

useLayoutEffectによるDOM測定

useLayoutEffectはDOM変更後、ブラウザがペイントする前に同期的に実行されます。ユーザーが更新を見る前にDOMを測定または変更する必要がある場合に適切な選択です。

useEffect vs useLayoutEffect のタイムライン

レンダリング -> DOM変更 -> useLayoutEffect -> ブラウザペイント -> useEffect

useEffectだとフリッカーが発生する理由

useEffectでは、ツールチップはまず(0, 0)でレンダリングされ、ブラウザがそこでペイントし、その後でのみ位置が修正されます -- 可視的なフリッカーが発生します。useLayoutEffectはペイント前に位置を更新することでこれを防ぎます。

パフォーマンスの警告

useLayoutEffectはブラウザのペイントをブロックします。エフェクトが遅い場合、ユーザーはフリーズした画面を見ることになります。視覚的なフリッカーを本当に防ぐ必要がある場合にのみ使用してください。