useUpdateLayoutEffect

挂载完成后，在依赖更新的时候执行

useUpdateLayoutEffect 與 useLayoutEffect 類似，但跳過第一次渲染（掛載時）的執行。effect 在 DOM 變更後、瀏覽器繪製前同步執行，但只在依賴更新時觸發，不在初始渲染時觸發。

使用場景

在依賴更新時同步讀取或修改 DOM 但跳過初始渲染
在值變更後進行佈局測量或調整但不在首次掛載時執行
需要佈局 effect 的時序但不需要初始渲染執行的場景

注意事項

佈局時序：與 useLayoutEffect 相同，在 DOM 變更後、瀏覽器繪製前同步執行。
跳過初始渲染：effect 回呼在元件首次掛載時不會執行。
相關 hooks：另請參閱 useUpdateEffect 用於跳過初始渲染的標準 effect，以及 useIsomorphicLayoutEffect 用於 SSR 安全的佈局 effect。

Usage

Live Editor


function Demo() {
  const [count, setCount] = useState(0);
  const [layoutEffectCount, setLayoutEffectCount] = useState(0);
  const [updateLayoutEffectCount, setUpdateLayoutEffectCount] = useState(0);

  useLayoutEffect(() => {
    setLayoutEffectCount(c => c + 1);
  }, [count]);

  useUpdateLayoutEffect(() => {
    setUpdateLayoutEffectCount(c => c + 1);
    return () => {
      // do something
    };
  }, [count]); // you can include deps array if necessary

  return (
    <div>
      <p>layoutEffect計數：{layoutEffectCount}</p>
      <p>更新layoutEffect計數：{updateLayoutEffectCount}</p>
      <p>
        <button type="button" onClick={() => setCount(c => c + 1)}>
          重新渲染
        </button>
      </p>
    </div>
  );
};

Result