useOnceLayoutEffect

避免 React18 useLayoutEffect 運行兩次

useOnceLayoutEffect 確保一個佈局 effect 只執行一次，即使在 React 嚴格模式下也是如此。它是 useOnceEffect 的 useLayoutEffect 版本，在瀏覽器繪製前同步執行，適合需要在繪製前讀取或修改 DOM 的情況。

使用場景

• 在繪製前執行只應發生一次的 DOM 測量或修改
• 在嚴格模式下初始化只能設定一次的第三方 DOM 函式庫
• 執行在繪製前需要完成的不可冪等初始化

注意事項

• 佈局時序：與 useLayoutEffect 相同，在 DOM 變更後、瀏覽器繪製前同步執行。
• React 嚴格模式：專門設計用於繞過 React 18 嚴格模式的雙重呼叫行為。
• 相關 hooks：另請參閱 useOnceEffect 用於標準 effect 的同功能版本，以及 useIsomorphicLayoutEffect 用於 SSR 安全的佈局 effect。

Usage

function Demo() {
  const [updateEffect, setLayoutEffect] = useState(0);
  const [onceLayoutEffect, setOnceLayoutEffect] = useState(0);

  useOnceLayoutEffect(() => {
    setOnceLayoutEffect(onceEffect => onceEffect + 1);
  }, []);

  useLayoutEffect(() => {
    setLayoutEffect(effect => effect + 1);
  }, []);

  return (
    <div>
      <div>單次effect：{onceLayoutEffect}</div>
      <br />
      <div>effect：{updateEffect}</div>
    </div>
  );
};