---
title: "useIsomorphicLayoutEffect 用法與示例"
description: "useIsomorphicLayoutEffect 是一個 React hook，在瀏覽器中使用 useLayoutEffect、在伺服器端使用 useEffect —— 藉此避免 SSR 時的 useLayoutEffect 警告。"
canonical: https://reactuse.com/zh-Hant/effect/useisomorphiclayouteffect/
---

# useIsomorphicLayoutEffect

`useLayoutEffect` 會在服務端渲染的時候發出警告，所以我們在服務端用 `useEffect` 進行替代。 詳情可見 [Alex Reardon's article](https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a) 的文章

`useIsomorphicLayoutEffect` 在瀏覽器環境中使用 `useLayoutEffect`，在伺服器端使用 `useEffect`。這解決了 React 在 SSR 期間對 `useLayoutEffect` 產生的警告，同時仍在客戶端獲得同步佈局 effect 的好處。

### 使用場景

- 在需要 SSR 相容的元件中使用 `useLayoutEffect`
- 建構需要在瀏覽器繪製前同步讀取或修改 DOM 的 SSR 安全元件
- 作為函式庫作者建立跨環境安全的 effect hooks

### 注意事項

- **自動環境偵測**：在伺服器上使用 `useEffect`，在瀏覽器中使用 `useLayoutEffect`，無需手動判斷。
- **React 警告**：直接在 SSR 中使用 `useLayoutEffect` 會產生 React 警告。此 hook 消除了該警告。
- **相關 hooks**：另請參閱 `useUpdateLayoutEffect` 用於跳過初始渲染的佈局 effect，以及 `useOnceLayoutEffect` 用於僅執行一次的佈局 effect。

## Usage

```tsx live

function Demo() {
  const [value] = useState("useIsomorphicLayoutEffect");
  useIsomorphicLayoutEffect(() => {
    window.console.log(value);
  }, [value]);

  return <div>{value}</div>;
};

```

%%API%%