useLayoutEffect

公式ドキュメント ↗

useLayoutEffect(() => {
  const width = boxRef.current.getBoundingClientRect().width;
  setOffset(-width / 2); // 画面が描かれる前に補正するので、ズレた位置は画面に出ない
}, [open]);

実行の順番を比べる: 画面が描かれる前か後か

useLayoutEffect(() => {
  log("useLayoutEffect (画面が描かれる前)");
}, [trigger]);
useEffect(() => {
  log("useEffect (画面が描かれた後)");
}, [trigger]);

useLayoutEffectは、DOMが更新された直後・画面が描かれる直前に実行される（描画を一時的に待たせてでも先に処理を終わらせる、という意味で「同期的」と呼ぶ）。useEffectは画面が描かれた後、その処理の完了を待たずに実行される。

注意点: 処理が重いと、画面の更新も止まってしまう

useLayoutEffect(() => {
  heavyComputation(); // ここが重いと、その分だけ画面の更新が遅れる
}, [deps]);

useEffect(() => {
  heavyComputation(); // 画面の更新はブロックしない(体感の応答性が良い)
}, [deps]);

基本はuseEffectを使い、DOMの測定や位置調整など「画面が描かれる前に済ませないとちらつく」場合だけuseLayoutEffectに切り替える、くらいの使い分けでよい。迷ったらuseEffect。なお、これはブラウザ側のDOM描画に関するフックなので、サーバーだけで動く環境では効果を持たない(Reactが警告を出す)。