话说回来，

表单是每个 React 应用里被重写次数最多的部分。第一天看上去再简单但是——丢一个 把 onChange 接到 useState发版。说起来，到了第三个月，同一个表单上多了异步使用者名校验、一份自动保存的草稿、一个自定义日期浮层。还有一个必须和设计程序配合好的"受控/非受控"开关。其实，每一项都拖进来自己的临时状态机、自己的 effect 清理逻辑。还有自己那一堆边界情况，表单文件成了仓库里最长的那一个，团队里没人愿意碰它。

. 防抖的异步校验

手动实现

异步校验最经典的错误，是每敲一个键就发一次请求。经典的修法是 setTimeout经典的 bug 是忘了清理上一次的定时器：

import { useEffect,useState } from "react";老实说，function ManualUsernameField { const = useState;const = useState;const = useState<"idle" | "checking" | "ok" | "taken">;useEffect => { const id = setTimeout => setDebounced,);return => clearTimeout;},)，useEffect => { if { setStatus;return，} let cancelled = false;setStatus，fetch}`) .n => r.json) .n => { if setStatus;})，return => { cancelled = true;}，},);return => setUsername} /> {status}  );}

这里有两个 effect。干着两件不同的事，还必须保持同步。第一个是防抖器：把 username 的密集变化压成一个延迟后的 debounced 值。第二个是请求执行器：当 debounced 变化时发请求，并忽略掉过期返回。两个 effect 都需要自己的清理逻辑。忘了 clearTimeout请求会重复；忘了 cancelled 标志，竞态会让旧响应覆盖新响应。

真正的代价不是行数——而是这段防抖逻辑被焊死在了这个具体字段上。要在 email 字段复用一样的能力，就得复制粘贴这五行。

ReactUse 的写法：useDebounce

useDebounce 返回一个比输入值落后固定延迟的值：

import { useEffect,useState } from "react";import { useDebounce } from "@reactuses/core";function UsernameField { const = useState;
const debounced = useDebounce;其实，const = useState<"idle" | "checking" | "ok" | "taken">;useEffect => { if { setStatus;return，} let cancelled = false;setStatus，fetch}`) .n => r.json) .n => { if setStatus;})，return => { cancelled = true;}，},);return => setUsername} /> {status}  );}

第一个 effect——专管防抖的那个——消失了。useDebounce 自己接管了定时器和清理。剩下的代码才是真正属于你这个表单的部分：当防抖值变化时跑一次校验请求，并丢弃过期返回。

这个 Hook 还和函数版的 useDebounceFn 天然搭配——当你想给的是一个事件处理器而不是一个值时就用它。

. 受控还是非受控——选一种，两种都支持

库组件经常面对一个老问题：使用者应当传 value 和 function ManualToggle({ value。defaultValue = false,onChange,}: { value?这方面，boolean，defaultValue?: boolean，onChange?其实，: ( 说到next，boolean ) = void;}) { const isControlled = value!按理说，== undefined;const = useState;const current = isControlled?怎么说呢，value : internal;const handleClick = => { const next =!current，if ( isControlled ) setInternal;onChange，.;}，return ( {current?" 开 " : " 关 "} );} 模式本身不复杂，但它是一块吸 bug 的磁铁。如果使用者中途把 `value` 切回 `undefined`，模式就在受控和非受控间跳了一次。说起来，如果他们传了 `value`却没传 `onChange`呢？不过，React 自己的表单输入会对这两种情况都给出警告，但自定义组件几乎从不写这些校验——而当设计程序不断扩张。每一个 input、switch、slider、date picker都会复制一遍这堆样板。

ReactUse 的写法： useControlled