开始使用

先解决一个具体问题，不必给应用再加一层抽象。Hook 索引已经按每个 Hook 解决的场景整理好全部入口。

把调用 Hook 的组件放到客户端

Better Hooks 会调用 React 客户端 Hook。在使用 RSC 的应用中，请把 'use client' 放在实际调用 Hook 的最小组件里：

'use client';
 
import { useToggle } from 'better-hooks/use-toggle';
 
export function DetailsButton() {
  const [open, toggle] = useToggle(false);
 
  return (
    <button type="button" aria-expanded={open} onClick={() => toggle()}>
      {open ? '收起详情' : '查看详情'}
    </button>
  );
}

纯客户端 React 应用不需要这条指令。独立入口能让组件依赖更容易看懂；从根入口 better-hooks 导入也同样受支持。

给首屏一个安稳的答案

服务端不知道窗口大小、网络状态或存储内容。界面有明确需求时，请传入初始值。面向浏览器的 Hook 也会说明自己的中性服务端结果：useWindowSize 从 { width: 0, height: 0 } 开始，useMediaQuery 则可以通过 defaultMatches 指定初始值。

Hydration 后真实浏览器值会接上来。首屏布局应能接住这次变化，避免因为一个未知测量值替换大块界面。

让 Hook 收好自己的工作

不要在 Hook 外再套一层定时器或原生监听器。更新输入，让 React 触发对应清理。延迟回调、浏览器订阅、Observer 和网络任务尤其需要遵守这一点。

接着往下看

打开所选 Hook 的参考页，就能看到签名、行为、SSR 说明和在线示例。想了解整个库共用的生命周期规则，可以继续阅读 React 19。