useUpdate

强制更新函数

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

使用场景

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

注意事项

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

Usage

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

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

API

useUpdate

Returns

() => void: 强制更新函数

Arguments