react-hooks-best-practices

React Hooks 最佳实践

从开发体验（DX）、优化和逻辑三个角度，介绍在 React 应用中使用 Hook 以及设计自定义 Hook 的实用规则。

适用场景

在以下情况中参考这些指南：

• 编写使用 Hook 的 React 组件
• 创建或重构自定义 Hook
• 设计易用且可组合的 Hook API
• 检查依赖项、Effect、引用、状态、回调和记忆化
• 检查 Hook API 是否会导致不必要的重新渲染
• 检查 Hook 内部是否存在过期闭包、清理、SSR 和生命周期正确性问题
• 设计订阅高频更新的自定义 Hook
• 使用公开 snapshot、回调和 watch() API 的 Hook
• 重构在每次浏览器事件发生时都会更新 React 状态的 Hook
• 将与 DOM 相邻的工作从 React 渲染状态中移出

按优先级划分的规则类别

优先级	类别	影响	前缀
1	开发体验（DX）	高	dx-
2	优化	高	optimization-
3	逻辑	高	logic-

快速参考

1. 开发体验（高）

• dx-extract-complex-hook - 将复杂的功能逻辑移入自定义 Hook，并使用分组的返回契约，例如 form、state、functions、refs 和 features

2. 优化（高）

• optimization-watch-mode - 仅在 UI 需要响应式渲染数据时使用 watch()；其他情况下，将高频更新保留在快照和回调中

3. 逻辑（高）

规则即将推出。

使用方法

阅读各个规则文件，了解详细说明和示例：

rules/dx-extract-complex-hook.md
rules/optimization-watch-mode.md

每个规则文件都包含：

• 该模式解决的问题
• 错误和正确的代码示例
• 面向 Hook 作者和 Hook 使用者的指南
• 相关的源材料参考

完整编译文档

编译后的概览请参阅 AGENTS.md。