useEffect と useLayoutEffect の違いは何ですか?

Question

IT Interview Practice · Accepted Answer

どちらもエフェクトを実行しますが、**ブラウザのペイントに対するタイミングが異なり**、そのタイミングの差こそが要点です。

- **`useEffect`** はブラウザがペイントした**後**に実行されます。非同期かつ非ブロッキングです。ほぼすべての用途(データ、サブスクリプション、ロギング)に使います。
- **`useLayoutEffect`** は **DOM が変更された後、ブラウザがペイントする前に同期的に**実行されます。レイアウトを読み取り、同じフレーム内で DOM を変更して、目に見えるちらつきを避けたい場合に使います。

```text
render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
```

## なぜ useLayoutEffect が必要になるのか

要素を測定し、そのサイズに基づいてツールチップを再配置する場合を想像してください。`useEffect` だと、ユーザーは一瞬ツールチップが間違った位置に表示され、その後ジャンプするのを見てしまいます:

```jsx
useLayoutEffect(() => {
  const { height } = ref.current.getBoundingClientRect();
  setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
```

`useEffect` だと、同じコードがペイント後に実行され、1 フレームのちらつきが生じます。

## なぜデフォルトでは使うべきでないのか

- これは**ペイントをブロックします**。`useLayoutEffect` 内の重い処理は、ブラウザがそれを終えるまでペイントできないため、UI がカクついて感じられます。
- **SSR 中に警告を出します**(レイアウトの存在しないサーバー上では実行できないため)。

**経験則:** デフォルトは `useEffect` を使い、`useLayoutEffect` は、そうしないとちらつく同期的な DOM の測定/変更にのみ使います。

関連する質問

なぜ useLayoutEffect が必要になるのか

なぜデフォルトでは使うべきでないのか