题目重点：不背 Hook 名单，按 useState、useEffect、useRef、useMemo/useCallback 的职责与误用讲项目例子。
题意与假设
这道练习题保留了面经中值得训练的核心约束，并将需要澄清的条件单独列出。现场拿到变体时，先和面试官确认这些条件。
- 训练场景为函数组件，候选人应只讲自己确实使用过的 Hooks 和项目；题目没有候选人的真实项目故事，文章不替他编造。
- 以下 API 行为按 React 官方文档说明，项目应确认所用版本和编译配置。
解题路线
- 先按职责分类：`useState` 保存会影响渲染的本地状态；若新值依赖旧值，使用函数式 updater 避免陈旧闭包。
- `useEffect` 用来与组件外部系统同步（订阅、计时器、网络等），依赖变化或卸载时执行 cleanup；可从 props/state 直接计算的派生数据不要无故放 Effect 后再 setState。
- `useRef` 保存跨渲染可变值或 DOM 引用，变更 `.current` 本身不会触发重渲染；不要把需要显示的状态藏进 ref。
- `useMemo` 缓存纯计算结果，`useCallback` 缓存函数引用；依赖必须完整，且二者是性能工具，不是修复逻辑错误的必需语义。先 profile 再决定是否值得。
- 讲一个真实项目时用‘需求→为何选该 Hook→依赖/cleanup→一次 bug 与验证’结构，不凭空罗列十几个名字。
手动走一遍
搜索页输入文本用 `useState`，订阅外部数据源用 `useEffect` 并在 cleanup 退订，输入框聚焦可用 `useRef`。若昂贵过滤结果在同样列表与搜索词下重复计算，可测量后用 `useMemo`；若只是字符串拼接，额外 memo 反而增加心智成本。
规模与取舍
Hook 本身没有统一 O(n)；每次 render 的纯计算随组件逻辑增长，Effect setup/cleanup 取决于外部操作，缓存也占内存。面试应给特定项目数据和 Profiler 证据，而不是称某 Hook 普遍提速。
易错点与追问
容易失分的边界
- 在条件分支/循环里调用 Hooks，破坏调用顺序规则。
- Effect 依赖漏值，异步回调读到旧数据。
- 异步请求响应乱序却无取消或忽略旧结果的 cleanup。
- Ref 值变了希望 UI 自动更新。
- 所有变量都 useMemo/useCallback，却没有测量收益。
继续深挖
- 何时用函数式 setState updater？
- Effect cleanup 如何避免搜索请求旧结果覆盖新结果？
- useRef 与 useState 的显示语义差别？
- React 18 严格模式的开发期重复 setup/cleanup 会暴露什么问题？
技术参考
- React 官方 useEffect：外部系统同步与 cleanup。
- React 官方 useMemo：纯计算缓存与依赖约束。
