---
title: "useUpdate 用法与示例"
description: "强制更新函数。"
canonical: https://reactuse.com/zh-Hans/effect/useupdate/
---

# useUpdate

强制更新函数

`useUpdate` 返回一个稳定的函数，调用时强制组件重新渲染。内部使用 `useReducer` 配合递增计数器，因此每次调用产生一个新的状态值触发 React 的协调。返回的函数标识在渲染之间是稳定的，可以安全地作为 prop 传递或存储在 ref 中。

### 使用场景

- 在修改 ref 或 React 不跟踪的外部可变值后强制重新渲染
- 与命令式 API 或在 React 感知之外更新状态的第三方库集成
- 按需刷新显示的值（例如 `Date.now()`）而无需管理显式状态

### 注意事项

- **稳定标识**：返回的更新函数在渲染之间永不改变，因此可以安全地在依赖数组中使用或传递给子组件。
- **谨慎使用**：强制重新渲染绕过了 React 的声明式模型。在可能的情况下优先使用 state 或 context 更新。
- 参见 `useRafFn` 了解在每个动画帧上持续重新渲染。

## Usage

```tsx live

function Demo() {
  const update = useUpdate();

  return (
    <>
      {/* 为了避免 SSR 错误，因为 date.now() 在服务器和客户端上不会相同 */}
      <div suppressHydrationWarning={true}>时间: {Date.now()}</div>
      <button onClick={update}>更新</button>
    </>
  );
};

```

%%API%%