Reactの「同期」と「非同期」の境界線：useLayoutEffectが解決するUIの「チラつき」の正体
Reactの世界において、`useEffect`は万能のナイフのように扱われがちだ。しかし、上級エンジニアであればあるほど、その「非同期性」が引き起こす微細な不整合に頭を悩ませた経験があるはずだ。
「なぜ、一瞬だけDOMが意図しない状態で表示されるのか？」
「なぜ、測定したはずの要素の高さが0になってしまうのか？」
この問いに対する答えが、`useLayoutEffect`という「同期」の制御にある。今回は、ブラウザの描画パイプラインの深淵に触れながら、この二つのフックの使い分けについて、現場の知見を交えて紐解いていこう。
—
1. ブラウザの描画パイプラインにおける位置付け
まず、大前提となるブラウザの挙動を整理する。Reactのコンポーネントがレンダリングを終えた後、ブラウザは以下のステップを踏む。
1. ReactによるDOMの更新（仮想DOMから実DOMへ）
2. `useLayoutEffect` の実行（同期）
3. ブラウザによるレイアウト計算とペイント（画面への描画）
4. `useEffect` の実行（非同期）
ここで重要なのは、`useEffect` はブラウザが画面を塗り終えた後に「予約」として実行される点だ。対して `useLayoutEffect` は、ReactがDOMを書き換えた直後、ブラウザが画面を更新する前に実行される。
このわずかな時間のズレが、UIの堅牢性を左右する決定的な差を生む。
2. 「チラつき」が発生するメカニズムと解決策
例えば、初期ロード時にDOM要素のサイズを測定し、その値に基づいてツールチップの位置を動的に計算するようなコンポーネントを想像してほしい。
import { useState, useRef, useEffect, useLayoutEffect } from ‘react’;
const Tooltip = () => {
const ref = useRef(null);
const [position, setPosition] = useState(0);
// useEffectを使うと…
useEffect(() => {
// 1. 最初は位置がズレた状態で一度ペイントされる
// 2. その後、計算が行われ、再レンダリングが走り、またペイントされる
// この結果、ユーザーには一瞬の「ガタつき（Layout Shift）」が見えてしまう
if (ref.current) {
setPosition(ref.current.offsetWidth / 2);
}
}, []);
// useLayoutEffectを使うと…
useLayoutEffect(() => {
// ブラウザがペイントする前に「同期」して位置を決定する
// ユーザーには計算済みの正しい位置が最初から表示される
if (ref.current) {
setPosition(ref.current.offsetWidth / 2);
}
}, []);
return
;
};
`useEffect` を使うと、一度「未計算の状態」がペイントされ、その後に「計算済みの状態」が上書きされる。これが、高負荷なアプリケーションにおいてUXを著しく損なう「チラつき」の正体だ。`useLayoutEffect` を使えば、Reactは更新をブロックしてまで同期的に計算を完了させるため、ユーザーの目には完璧な状態のみが届く。
3. パフォーマンスとアーキテクチャ上の注意点
しかし、ここで警告しておきたい。`useLayoutEffect` は強力だが、「使いすぎは禁物」だ。
`useLayoutEffect` 内で重い計算や複雑なDOM操作を行うと、ブラウザのメインスレッドをブロックし、フレームドロップ（カクつき）を誘発する。特にアニメーションが絡む箇所で多用すれば、アプリケーション全体の応答性は急激に悪化する。
以下の判断基準を常に持ち歩いてほしい。
- 基本戦略: 原則として `useEffect` を使う。非同期であることは、メインスレッドの解放という観点でブラウザにとって極めて健全だからだ。
- 例外的な選択: DOMを直接測定する必要がある場合、もしくはDOMの状態を即座に書き換えて「UIの不自然な変化」を隠蔽したい場合のみ `useLayoutEffect` を検討する。
- メモリ効率: `useLayoutEffect` 内で不必要なステート更新（再レンダリングのトリガー）を繰り返すと、無限ループに近いレンダリングサイクルに陥るリスクがある。依存配列の管理は、`useEffect` 以上に厳格に行う必要がある。
4. 現場で生き残るための「非同期競合」への防衛術
`useEffect` のクリーンアップ関数を軽視してはならない。特に非同期処理を伴う場合、古いレンダリングの結果が後のステートを上書きしてしまう「競合（Race Condition）」は、デバッグが極めて困難なバグを引き起こす。
useEffect(() => {
let isCancelled = false; // クリーンアップ用のフラグ
const fetchData = async () => {
const data = await fetchApi();
if (!isCancelled) {
setData(data); // 競合を防ぐためのガード節
}
};
fetchData();
return () => {
isCancelled = true; // コンポーネントのアンマウント、または依存変更時に実行
};
}, [id]);
結論：プロフェッショナルの矜持
Reactにおける副作用の制御とは、単なるAPIの呼び出し場所を決めることではない。「ユーザーにいつ、どのような情報を可視化させるか」というタイミングを、ブラウザのエンジンレベルで制御する高度な職人芸だ。
`useLayoutEffect` を使うべきか、`useEffect` で十分か。その判断に迷ったとき、一度ブラウザの「描画のパイプライン」を脳内でシミュレーションしてみてほしい。その先にこそ、真に堅牢で、ユーザーを驚かせるほど滑らかなインターフェースがあるはずだ。
技術は常に、その細部へのこだわりの中にこそ宿る。あなたのコードが、今日もまた誰かの体験を支えていることを忘れないでほしい。
コメント