react-patterns

React 19+ patterns, performance optimization, and component architecture. Covers hooks, state management decision trees, data fetching with use() API, Server Components, React Compiler, bundle optimization, and re-render elimination. Use when building components, optimizing re-renders, fetching data, managing state, handling forms, structuring frontends, or reviewing React code.

跳到安装

仓库: oakoss/agent-skills
最近来源活动: 2026年2月25日 06:43
检测到的 SKILL.md 语言: 英语
星标: 14
分支: 5

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

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

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

文件资源管理器

7 个文件

SKILL.md

来源说明 · 只读预览

返回搜索返回安装

name	react-patterns
description	React 19+ patterns, performance optimization, and component architecture. Covers hooks, state management decision trees, data fetching with use() API, Server Components, React Compiler, bundle optimization, and re-render elimination. Use when building components, optimizing re-renders, fetching data, managing state, handling forms, structuring frontends, or reviewing React code.
license	MIT
metadata	{"author":"oakoss","version":"1.1","source":"https://react.dev"}
user-invocable	false

React

Overview

Covers component architecture, performance optimization, state management, data fetching, and modern React 19+ APIs. Prioritizes React Compiler compatibility, Server Components, and elimination of data fetching waterfalls.

When to use: Building React applications, optimizing performance, choosing state management, implementing data fetching, reviewing component architecture.

When NOT to use: Non-React frameworks, purely server-side rendering without React, static sites without interactivity.

Quick Reference

Pattern

Data fetching	`use(dataPromise)`	Replaces useEffect+useState fetch pattern
Form handling	`useActionState(action, init)`	Built-in pending states and error handling
Optimistic UI	`useOptimistic(state, updateFn)`	Instant feedback while server processes
Non-urgent updates	`useTransition()`	Mark updates as interruptible
Effect events	`useEffectEvent(fn)`	Reactive values without re-triggering effects
Form pending status	`useFormStatus()`	Read parent form pending state from child component
Unique IDs	`useId()`	Hydration-safe IDs for accessibility
Server state	React Query / `useSuspenseQuery`	Caching, deduplication, background refetch
Client state (local)	`useState` / `useRef`	Single component or transient values
Client state (global)	Zustand / Context	Cross-component client-only state
Derived state	Compute during render	Never sync derived values with effects
Lazy initialization	`useState(() => expensive())`	Avoid eager computation on every render
Component types	Page, Feature, UI	Route entry, business logic, reusable primitives
Memoization	Trust React Compiler first	Manual useMemo/useCallback only when needed
Ref as prop	`ref` prop on function components	No `forwardRef` needed in React 19
Ref cleanup	Return function from ref callback	Cleanup runs on detach instead of `null` call
Code splitting	`React.lazy()` + Suspense	Lazy-load heavy components
Parallel fetches	`Promise.all()`	Eliminate sequential await waterfalls
Request dedup	`React.cache()`	Per-request server-side deduplication
Abort server work	`cacheSignal()`	Cancel expensive async work when client disconnects
Resource preloading	`prefetchDNS`, `preconnect`, `preload`, `preinit`	Optimize resource loading from components
State preservation	`<Activity>`	Hide UI while keeping state mounted

Mistake	Correct Pattern
Fetching data in useEffect with useState	Use the `use()` API or React Query for data fetching with built-in caching
Storing derived values in state and syncing with effects	Compute derived values during render; never use effects for state synchronization
Wrapping everything in useMemo and useCallback	Trust React Compiler first; only add manual memoization for expensive computations or memoized children
Using `array.sort()` which mutates state	Use `array.toSorted()` for immutable sorting to avoid unexpected re-renders
Using `&&` for conditional rendering	Use ternary `condition ? <Component /> : null` to avoid rendering falsy values like `0`
Using Math.random() or Date for IDs	Use `useId()` for hydration-safe unique identifiers
Putting reactive values in effect deps to read latest value	Use `useEffectEvent` to access latest values without re-triggering effects
Creating object literals as effect dependencies	Hoist static objects outside the component or use primitive dependencies
Using `forwardRef` in React 19 projects	Pass `ref` directly as a prop; `forwardRef` is deprecated in React 19
Mutating props or state during render	Follow Rules of React for React Compiler compatibility: pure renders, no side effects

react-patterns

安装方式

检查来源文件

React

Overview

Quick Reference

React

Overview

Quick Reference

Common Mistakes

Delegation

References

react-patterns

来源信息

安装方式

检查来源文件

同仓库更多 Skills

同仓库更多 Skills

React

Overview

Quick Reference

React

Overview

Quick Reference

Common Mistakes

Delegation

References