Prompts-MCP 686 skills · ai / design / design-pattern / framework / fundamentals / habit / lang / tech-selection /mcp/sse
framework framework/react/react19/index.md medium

framework-react-react19-index

React 19 新特性集合:use + Suspense 取数 / Actions 表单提交 / 并发渲染调度 / React Compiler 自动记忆化 / useEffectEvent。Use when 用 React19+ 新写法重构组件 / 替换 useEffect 取数为 Suspense / 表单改 Actions / 删手写 useMemo

子项索引

子项 一句话
data-fetching-with-suspense skill React19 用 use(promise)+Suspense 声明式读已建 promise/context,非取数层
form-actions skill React 19 表单 Actions 三件套 useActionState / useOptimistic / useFormStatus 替手写 onSubmit
concurrent-rendering skill React 并发渲染防卡顿 — useTransition 标记非紧急更新 / useDeferredValue 延迟昂贵派生值
react-compiler-memo skill React Compiler 开启后自动记忆化,默认不再手写 useMemo/useCallback/React.memo,仅保留三类例外
effect-event skill React19.2+ 用 useEffectEvent 把「读最新值但不该触发重跑」的非响应式逻辑移出 effect 依赖

React 19 · 新特性

本层包含

名称 类型 一句话
data-fetching-with-suspense use(promise) + Suspense 取数
form-actions Actions 表单提交三件套
concurrent-rendering useTransition / useDeferredValue
react-compiler-memo Compiler 自动记忆化边界
effect-event useEffectEvent 隔离非响应式逻辑

何时下钻

  • 异步取数想去掉 loading/error 样板 → data-fetching-with-suspense.md
  • 表单提交、乐观更新、pending 态 → form-actions.md
  • 输入框 / 大列表过滤卡顿,要分优先级 → concurrent-rendering.md
  • 想删手写 useMemo/useCallback/memo 或纠结要不要加 → react-compiler-memo.md
  • effect 里读了 prop/state 又不想它进依赖数组 → effect-event.md

链接