在 React 中，useEffect 和 useLayoutEffect 都是用來處理副作用的 Hook。它們在功能上相似，但執行時機不同，這導致它們在某些情況下有不同的應用場景。

useEffect

• 執行時機：useEffect 在瀏覽器完成畫面繪製之後執行。因此，它不會阻塞瀏覽器更新畫面。
• 應用場景：適合處理非緊急的副作用，如資料請求、訂閱、計時器等。
• 性能影響：因為是在畫面繪製後執行，所以對用戶界面更新的性能影響較小。

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 執行副作用，例如資料請求
    fetch('/api/data')
      .then(response => response.json())
      .then(data => console.log(data));

    // 清除副作用
    return () => {
      // 清除訂閱或計時器
    };
  }, []); // 依賴陣列為空，表示這個 effect 只會在元件掛載和卸載時執行

  return <div>My Component</div>;
}

useLayoutEffect

• 執行時機：useLayoutEffect 在瀏覽器完成畫面繪製之前執行。它會在所有 DOM 變更後同步執行副作用，然後再繪製畫面。
• 應用場景：適合處理需要立即讀取 DOM 佈局和同步變更的副作用，例如測量 DOM 元素尺寸或位置、操作 DOM。
• 性能影響：因為是在畫面繪製之前執行，可能會導致畫面更新延遲，影響性能，因此應謹慎使用。

import React, { useLayoutEffect, useRef } from 'react';

function MyComponent() {
  const divRef = useRef(null);

  useLayoutEffect(() => {
    // 讀取和操作 DOM
    const { height } = divRef.current.getBoundingClientRect();
    console.log('Height:', height);

    // 清除副作用
    return () => {
      // 清除可能的 DOM 操作
    };
  }, []); // 依賴陣列為空，表示這個 effect 只會在元件掛載和卸載時執行

  return <div ref={divRef}>My Component</div>;
}

總結

• useEffect：在畫面繪製之後執行，用於大多數的副作用處理，如資料請求、訂閱、計時器等。對性能影響較小。
• useLayoutEffect：在畫面繪製之前執行，用於需要同步 DOM 操作的副作用。可能會影響畫面更新性能，應謹慎使用。

面試考題

1. 什麼是 useEffect？它的執行時機是什麼？
   • 答案：useEffect 是一個 React Hook，用於處理副作用。它在瀏覽器完成畫面繪製之後執行，不會阻塞畫面更新。
2. 什麼是 useLayoutEffect？它的執行時機是什麼？
   • 答案：useLayoutEffect 是一個 React Hook，用於處理需要立即讀取和操作 DOM 的副作用。它在瀏覽器完成畫面繪製之前執行，會同步執行副作用。
3. useEffect 和 useLayoutEffect 的主要差異是什麼？
   • 答案：useEffect 在畫面繪製後執行，而 useLayoutEffect 在畫面繪製前執行。useLayoutEffect 適合需要同步 DOM 操作的副作用，useEffect 則適合大多數的非緊急副作用。
4. 什麼時候應該使用 useLayoutEffect 而不是 useEffect？
   • 答案：當需要立即讀取和操作 DOM 元素，且這些操作可能影響畫面佈局時，應使用 useLayoutEffect。例如，測量 DOM 元素尺寸或位置。