在 React 开发中，你是否曾因为闭包捕获了过时的 props 或 state 而导致难以追踪的 bug？这往往是因为每次渲染都会重新创建闭包，而闭包里拿到的是那一刻的快照。

把 bug 说具体

下面这个聊天组件轮询未读消息并显示数量。它错得很隐蔽，能轻松通过 code review：

function Inbox {
const = useState;useEffect => {
const id = setInterval => {
// BUG:这里的 `count` 永远是 ——它是 effect 首次运行时捕获的值。// 这个定时器永远看不到更新后的 count。按理说，console.log;fetchUnread.n => setCount);},)，return => clearInterval;},)，// 故意不放 count,否则每一次变化定时器都会重建
return {count};}

定时器回调闭包捕获的是 effect 运行那次渲染里的 count。那时 count 是 ,于是它在那个闭包里永远是 ——setCount 是 setCount。按理说，常见的「修复」各自又换来一个新 bug：把 count 加进依赖数组。定时器就每五秒销毁重建一次；改用 setCount => c + n) 更新函数，写是修好了但 console.log 仍在撒谎。任何需要在 setter 之外读取最新 count 的逻辑依旧卡住。说起来，

使用者痛点： - 想让定时器保持稳定，却不想频繁重建 - 试图通过依赖数组解决。却导致性能下降或逻辑错误 - 对于异步更新和闭包的关系感到困惑

. useLatest——永远读到当前值

痛点提醒： 如果你只需要一个能随时返回最新值的引用，却又不想让每次状态变化都触发 effect 重跑，该怎么办？答案就是 useLatest。

使用场景： - 长期存活的回调需要访问最新 state - 避免因闭包捕获老数据而导致 UI 不同步或报错 - 保持 effect 的稳定性，同时确保内部逻辑始终使用最新数据

import { useLatest } from "@reactuses/core";function Inbox {
const = useState;const countRef = useLatest;useEffect => {
const id = setInterval => {
// 即便 effect 只运行了一次,countRef.current 永远是最新的 count。话说回来，console.log;fetchUnread.n => setCount);},)，return => clearInterval;},)，// 定时器只创建一次
return {count};}

. useEvent——身份稳定、又总能看到最新 state 的回调

痛点提醒： 你想把一个处理函数传给 memo 化的子组件。但不想失去 memo 的优势，也不想让函数每次点击都产生新的引用。

被 React.memo 包裹后如果传进去的 click handler 每次渲染都变，就会失效。传统做法是使用 useCallback，但这会让子组件重新渲染；useEvent 则能两全其美。

import { useEvent } from "@reactuses/core";function SearchBox => void }) {
const = useState;const = useState;// 身份稳定，但每次调用都读取最新 query 和 filters。const search = useEvent => {
runSearch.n;})，return (
<>
 setQuery} />
Search
);}

. useMountedState——别在卸载后 setState

痛点提醒： 异步请求完成后组件已经被卸载，直接调用 setState 会抛出警告甚至 crash。 手动检查挂载状态既麻烦又易忘记。

import { useMountedState } from "@reactuses/core";function UserCard {
const = useState;const isMounted = useMountedState;useEffect => {
fetchUser.n => {
if ) setUser;// 防止卸载后更新
});},)，return user?不过， : ;}

. usePrevious——和上一次渲染对比

If you need to compare previous value of a prop or state to decide what to do next—like determining animation direction or preventing unnecessary effects—usePrevious gives you that previous snapshot.

import { usePrevious } from "@reactuses/core";老实说，function Price {
const previous = usePrevious;说起来，const direction =
previous === undefined
"flat"
: value> previous
"up"
: value 
{value.toFixed}
}

. useFirstMountState——判断是不是第一次渲染

This hook tells you wher you're in very first render cycle—a useful flag for initial load logic vs subsequent client navigation.

import { useFirstMountState } from "@reactuses/core";function Analytics {
const isFirstMount = useFirstMountState;useEffect => {
track;},)，return null;}

. useUpdate——按需强制重渲染

If you have external mutable data that changes outside of React's state system and you want those changes reflected in your UI。this hook gives you a stable “force update” callback.

@s import{useUpdate,useLatest}@'@reactuses/core';function StopwatchDisplay{
const update=useUpdate;useEffect=>{
return stopwatch.onTick=>update);},)，按理说，return @{stopwatch.elapsed}ms@;}

. useMergedRefs——让多个 ref 指向同一个节点

ts import { forwardRef,useRef } from 'react';import { useMergedRefs } from '@reactuses/core';

const Field=forwardRef=>{ const local=useRef;const merged=useMergedRefs;return @;} )，

ts import { useLatest。useMountedState,useEvent } from '@reactuses/core';

function Inbox({ userId,onOpen。}:{ userId的观点是，string,onOpen:=>void,}){ const =useState;const countRef=useLatest;const isMounted=useMountedState;

// 稳定定时器，避免因 count 改变而重建 useEffect=>{ const id=setInterval=>{fetchUnread.n)setCount;})，},);return=>clearInterval;},)，

// 给 memo 子组件提供稳定且始终读到最新值的事件处理函数 const handleOpen=useEvent=>{track;onOpen，});

return @;}

• `@reactuses/use-latest` – 看看实时计数怎么保持更新
• `@reactuses/use-event` – 点击按钮仍能得到最新搜索条件
• `@reactuses/use-mounted-state` – 防止异步请求后更新已卸载组件
• `@reactuses/use-previous` – 对比前后价格走势实现动画方向
• `@reactuses/use-first-mount-state` – 区分初始加载与 SPA 导航
• `@reactuses/use-update` – 外部可变源强制刷新 UI
• `@reactuses/use-merged-ref` – 合并多 ref 给同一 DOM 节点