跳到正文

公开 API / 37 个 Hook

Hook 索引

按使用场景、分类或 TypeScript 签名查找 Hook,并查看完整的行为说明与源码。

Hook 搜索结果

找到 37 个 API 入口。

useToggle

管理布尔状态,并提供稳定的操作函数来切换或直接设置状态。

useToggle(initialValue?: boolean): readonly [boolean, (next?: ToggleUpdater) => void]

useBoolean

管理布尔状态,并提供 setTrue、setFalse 和 toggle 三个明确的操作函数。

useBoolean(initialValue?: boolean): UseBooleanResult

useControllableState

用同一个稳定的 setter 同时支持受控和非受控状态。

useControllableState<T>(options?: UseControllableStateOptions<T>): readonly [T | undefined, SetValue<T>]

useLatest

返回一个稳定的 ref,始终指向最近一次完成提交的值。

useLatest<T>(value: T): RefObject<T>

useMemoizedFn

保持回调引用稳定,同时调用最近一次提交的实现。

useMemoizedFn<T extends (...args: never[]) => unknown>(fn: T): T

useSafeState

提供在组件卸载后会忽略更新的 React 状态。

useSafeState<S>(initialState: S | (() => S)): UseSafeStateResult<S>

useResetState

增加稳定的 reset 操作,将状态恢复为首次解析得到的初始值。

useResetState<S>(initialState: S | (() => S)): UseResetStateResult<S>

useCounter

管理有边界的数字,并提供稳定的增加、减少、设置和重置操作。

useCounter(initialValue?: number, options?: UseCounterOptions): UseCounterResult

useMap

用稳定的不可变操作管理只读 Map 快照。

useMap<K, V>(initialValue?: MapInitializer<K, V>): UseMapResult<K, V>

useSet

用稳定的成员操作管理只读 Set 快照。

useSet<T>(initialValue?: SetInitializer<T>): UseSetResult<T>

useDebounce

输入停止变化并经过指定延迟后,再更新输出值。

useDebounce<T>(value: T, options: DebounceOptions): T

useThrottle

限制输出值的更新频率,每个时间窗口最多更新一次。

useThrottle<T>(value: T, options: ThrottleOptions): T

useDebounceFn

为函数调用添加防抖,并提供 cancel、flush 和 pending 状态。

useDebounceFn<Args, Result>(fn: (...args: Args) => Result, options: DebounceFnOptions): DebouncedFunction<Args, Result>

useThrottleFn

限制函数调用频率,并始终执行最近一次完成提交的回调。

useThrottleFn<Args, Result>(fn: (...args: Args) => Result, options: ThrottleFnOptions): ThrottledFunction<Args, Result>

useTimeout

延迟一段时间后执行一次最新回调,并支持取消和读取等待状态。

useTimeout(callback: () => void, delay: number | null, options?: UseTimeoutOptions): { cancel: () => void; pending: boolean }

useInterval

以声明式方式按固定间隔执行最新回调。

useInterval(callback: () => void, delay: number | null, options?: UseIntervalOptions): void

useAsync

运行可中止的异步任务,避免旧结果覆盖较新的状态。

useAsync<T>(task: AsyncTask<T>, options?: UseAsyncOptions): UseAsyncResult<T>

useLockFn

防止异步或同步操作并发执行。

useLockFn<Args extends readonly unknown[], Result>(fn: (...args: Args) => Result | PromiseLike<Result>, options?: UseLockFnOptions): LockFn<Args, Awaited<Result>>

useWebSocket

管理浏览器 WebSocket,提供原始消息、稳定操作和有界自动重连。

useWebSocket(url: string | URL | null, options?: UseWebSocketOptions): UseWebSocketResult

useEventListener

订阅 EventTarget,自动推断 Window 事件类型并在需要时清理监听器。

useEventListener(target?, type, listener, options?: UseEventListenerOptions | boolean): void

useClickOutside

当用户在目标元素之外按下指针时调用处理函数。

useClickOutside<T extends HTMLElement>(ref: RefTarget<T>, onOutside: (event: PointerEvent) => void, enabledOrOptions?: boolean | UseClickOutsideOptions): void

useKeyPress

匹配按键候选、谓词,以及 ctrl+s 形式的字符串组合键。

useKeyPress(keyFilter: KeyFilter, handler: KeyPressHandler, options?: UseKeyPressOptions): void

useHover

跟踪目标的鼠标进入与离开状态,并跟随 ref 目标变化。

useHover(target?: HoverTarget, options?: UseHoverOptions): boolean

useCopyToClipboard

复制文本并提供可观察状态,同时防止过期写入结果覆盖新状态。

useCopyToClipboard(options?: UseCopyToClipboardOptions): UseCopyToClipboardResult

useInput

用统一的 API 管理受控或非受控文本输入。

useInput(options?: UseInputOptions): UseInputResult

useLocalStorage

将类型安全的状态同步到 localStorage,并返回序列化错误。

useLocalStorage<T>(key: string, initialValue: T | (() => T), options?: StorageOptions<T>): UseStorageResult<T>

useSessionStorage

将类型安全的状态同步到当前标签页的 sessionStorage。

useSessionStorage<T>(key: string, initialValue: T | (() => T), options?: StorageOptions<T>): UseStorageResult<T>

useIntersectionObserver

跟踪元素或 ref 的交叉状态,并提供确定性的 SSR 快照。

useIntersectionObserver(options?: UseIntersectionObserverOptions): IntersectionObserverState; useIntersectionObserver(target: IntersectionObserverTarget, options?: Omit<UseIntersectionObserverOptions, 'target' | 'ref'>): IntersectionObserverState

useResizeObserver

通过 ResizeObserver 跟踪元素尺寸,并提供稳定的尺寸状态与清理。

useResizeObserver(options?: UseResizeObserverOptions): ResizeObserverState; useResizeObserver(target: ResizeObserverTarget, options?: Omit<UseResizeObserverOptions, 'target' | 'ref'>): ResizeObserverState