---
title: "useUpdateLayoutEffect 用法与示例"
description: "挂载完成后，在依赖更新的时候执行。"
canonical: https://reactuse.com/zh-Hans/effect/useupdatelayouteffect/
---

# useUpdateLayoutEffect

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

`useUpdateLayoutEffect` 与 `useLayoutEffect` 功能完全相同，只是跳过挂载时的初始执行。effect 在 DOM 变更后同步触发，但仅在后续依赖变化时，不在首次渲染时。这对于应仅响应更新的 DOM 测量或修改非常有用。

### 使用场景

- 响应状态变化调整布局或滚动位置，但不在 DOM 首次绘制的初始渲染时
- 仅在挂载后依赖实际变化时同步更新 DOM 属性或样式
- 防止布局 effect 在挂载时错误运行其更新逻辑导致的初始内容闪烁问题

### 注意事项

- **布局时序**：在 DOM 变更后同步运行，在浏览器重绘之前，与 `useLayoutEffect` 相同。避免慢操作以防止阻塞视觉更新。
- **相同签名**：接受 effect 回调和可选的依赖数组，与 `useLayoutEffect` 完全相同。通过返回值支持清理函数。
- 参见 `useUpdateEffect` 了解 `useEffect` 时序的等价物，以及 `useIsomorphicLayoutEffect` 了解 SSR 安全的布局 effect。

## Usage

```tsx live

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 () => {
      // 做一些事情
    };
  }, [count]); // 如果需要，可以包含 deps 数组

  return (
    <div>
      <p>布局effect计数: {layoutEffectCount}</p>
      <p>更新布局effect计数: {updateLayoutEffectCount}</p>
      <p>
        <button type="button" onClick={() => setCount(c => c + 1)}>
          重新渲染
        </button>
      </p>
    </div>
  );
};

```

%%API%%