Skip to main content

useEffect與useLayoutEffect比較

useEffect 跟 useLayoutEffect 是 React 中的兩個 Hook，它們的差別在於執行時機不同，這會影響到在畫面上看到的結果，尤其是當你需要操作 DOM 或計算 DOM 尺寸時，選錯可能會導致畫面閃爍或錯誤。

1. useEffect​

執行時機：​

在瀏覽器繪製（Paint）之後才會執行，也就是說：

React 把畫面畫出來 → 瀏覽器顯示 → 然後才執行 useEffect 裡的內容。

適合使用場景：​

  • 資料請求（API call）

  • 設定訂閱（subscription）

  • 設定事件監聽（例如：scroll、resize）

  • 一般的副作用處理

範例：​

useEffect(() => {
  console.log('畫面已經更新完成，現在執行副作用');
}, []);

2. useLayoutEffect​

執行時機：​

在DOM 更新完成，但還沒畫到螢幕之前就會執行，也就是說：

React 更新 DOM → useLayoutEffect 執行 → 然後才讓畫面顯示

適合使用場景：​

  • 需要同步讀取/修改 DOM 尺寸或位置

  • 避免畫面閃爍（例如使用動畫或手動設定樣式）

  • 精準控制 layout

範例：​

useLayoutEffect(() => {
  const width = document.getElementById('box')?.offsetWidth;
  console.log('在畫面顯示前就讀取 DOM 寬度', width);
}, []);

useEffect vs useLayoutEffect 總結比較​

項目useEffectuseLayoutEffect
執行時機畫面顯示後畫面顯示前
是否阻擋瀏覽器繪製不會會等它執行完才繪製
是否會影響畫面閃爍有可能可以避免
是否影響效能效能較好效能可能較差
適合用於資料請求、副作用讀取/設定 DOM、避免閃爍

小技巧：​

  • 預設請用 useEffect，比較不容易出問題。

  • 只有當你遇到畫面閃爍、需要先讀取 DOM 的位置或尺寸時，再考慮用 useLayoutEffect。