React 19 还在用老写法？这个 AI Skill 把新 API 用法全整理好了

React 19 发布了快一年，但我发现很多前端开发者对它的核心变化还是一知半解——Server Components 怎么用？React Compiler 到底香不香？use() 跟 useEffect 怎么选？

今天挖到一个 Skill，叫 react-patterns，来自 oakoss/agent-skills 这个库，专门帮 AI Agent 理解现代 React 架构。它不是教你写”Hello World”，而是把 React 19+ 的新 API、数据获取模式、性能优化路径全部整理成了可操作的参考。

它解决什么问题？

最大的痛点是”我该用哪个 API”。React 19 引入了 use(dataPromise)、useActionState、useOptimistic、useTransition 一堆新 Hook，老写法还能用但不知道新写法更好。这个 Skill 就把”什么场景用什么”做成了速查表，比如数据获取直接告诉你用 use() 而不是 useEffect + useState，表单处理用 useActionState 而不是手动管理 pending 状态。

核心内容有哪些？

覆盖了组件架构、性能优化、状态管理三大块：
– 数据获取：用 use() API 替代 useEffect 瀑布流，用 React.cache() 做请求去重
– 表单处理：useActionState 内置 pending 和 error 状态，useOptimistic 做即时 UI 反馈
– 性能优化：React Compiler 优先，手动 memoization 只在 profiling 后才加
– 状态管理模式：React Query / useSuspenseQuery 做服务端缓存，Zustand / Context 做跨组件客户端状态
– React Compiler 兼容性：明确了哪些写法会触发”不纯渲染”警告

怎么安装？

npx skills add https://github.com/oakoss/agent-skills --skill react-patterns

装完 AI 工具就能调用这个 Skill，获得 React 19 的最佳实践指导。

适合谁用？

需要用 AI 写/审 React 代码的开发者，特别是正在迁移到 React 19 或用 Next.js App Router 的团队。这个 Skill 把 Hooks 规则、Server Components 边界、Context 使用时机这些容易踩坑的地方都说清楚了，比读文档快，比自己踩坑省时间。

GitHub 仓库：https://github.com/oakoss/agent-skills

GitHub: https://github.com/oakoss/agent-skills