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 |
API / Approach |
Key Points |
| 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 |
Common Mistakes
| 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 |
Delegation
- Explore component architecture and identify performance bottlenecks: Use
Explore agent to profile re-renders, analyze bundle size, and trace data fetching waterfalls
- Implement React feature with proper patterns: Use
Task agent to build components following Server Component, Suspense, and React 19 conventions
- Design frontend architecture and state management strategy: Use
Plan agent to structure component hierarchy, select state management, and plan data fetching approach
If the shadcn-ui skill is available, delegate component variant and theming questions to it.
If the tailwind skill is available, delegate utility-first styling and design token questions to it.
If the zustand skill is available, delegate global client state management questions to it.
References
- Component patterns, state management, and useEffect decisions
- Performance optimization: waterfalls, bundles, and re-renders
- Hooks, Server Actions, and React 19 APIs
- React Compiler patterns and re-render optimization
- Server-side rendering and React Server Components
- Anti-patterns and troubleshooting guide
1---
2name: react-patterns
3description: |
4 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.
5
6 Use when building components, optimizing re-renders, fetching data, managing state, handling forms, structuring frontends, or reviewing React code.
7license: MIT
8metadata:
9 author: oakoss
10 version: '1.1'
11 source: 'https://react.dev'
12user-invocable: false
13---
14
15# React
16
17## Overview
18
19Covers 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.
20
21**When to use:** Building React applications, optimizing performance, choosing state management, implementing data fetching, reviewing component architecture.
22
23**When NOT to use:** Non-React frameworks, purely server-side rendering without React, static sites without interactivity.
24
25## Quick Reference
26
27| Pattern | API / Approach | Key Points |
28| --------------------- | ------------------------------------------------- | --------------------------------------------------- |
29| Data fetching | `use(dataPromise)` | Replaces useEffect+useState fetch pattern |
30| Form handling | `useActionState(action, init)` | Built-in pending states and error handling |
31| Optimistic UI | `useOptimistic(state, updateFn)` | Instant feedback while server processes |
32| Non-urgent updates | `useTransition()` | Mark updates as interruptible |
33| Effect events | `useEffectEvent(fn)` | Reactive values without re-triggering effects |
34| Form pending status | `useFormStatus()` | Read parent form pending state from child component |
35| Unique IDs | `useId()` | Hydration-safe IDs for accessibility |
36| Server state | React Query / `useSuspenseQuery` | Caching, deduplication, background refetch |
37| Client state (local) | `useState` / `useRef` | Single component or transient values |
38| Client state (global) | Zustand / Context | Cross-component client-only state |
39| Derived state | Compute during render | Never sync derived values with effects |
40| Lazy initialization | `useState(() => expensive())` | Avoid eager computation on every render |
41| Component types | Page, Feature, UI | Route entry, business logic, reusable primitives |
42| Memoization | Trust React Compiler first | Manual useMemo/useCallback only when needed |
43| Ref as prop | `ref` prop on function components | No `forwardRef` needed in React 19 |
44| Ref cleanup | Return function from ref callback | Cleanup runs on detach instead of `null` call |
45| Code splitting | `React.lazy()` + Suspense | Lazy-load heavy components |
46| Parallel fetches | `Promise.all()` | Eliminate sequential await waterfalls |
47| Request dedup | `React.cache()` | Per-request server-side deduplication |
48| Abort server work | `cacheSignal()` | Cancel expensive async work when client disconnects |
49| Resource preloading | `prefetchDNS`, `preconnect`, `preload`, `preinit` | Optimize resource loading from components |
50| State preservation | `<Activity>` | Hide UI while keeping state mounted |
51
52## Common Mistakes
53
54| Mistake | Correct Pattern |
55| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
56| Fetching data in useEffect with useState | Use the `use()` API or React Query for data fetching with built-in caching |
57| Storing derived values in state and syncing with effects | Compute derived values during render; never use effects for state synchronization |
58| Wrapping everything in useMemo and useCallback | Trust React Compiler first; only add manual memoization for expensive computations or memoized children |
59| Using `array.sort()` which mutates state | Use `array.toSorted()` for immutable sorting to avoid unexpected re-renders |
60| Using `&&` for conditional rendering | Use ternary `condition ? <Component /> : null` to avoid rendering falsy values like `0` |
61| Using Math.random() or Date for IDs | Use `useId()` for hydration-safe unique identifiers |
62| Putting reactive values in effect deps to read latest value | Use `useEffectEvent` to access latest values without re-triggering effects |
63| Creating object literals as effect dependencies | Hoist static objects outside the component or use primitive dependencies |
64| Using `forwardRef` in React 19 projects | Pass `ref` directly as a prop; `forwardRef` is deprecated in React 19 |
65| Mutating props or state during render | Follow Rules of React for React Compiler compatibility: pure renders, no side effects |
66
67## Delegation
68
69- **Explore component architecture and identify performance bottlenecks**: Use `Explore` agent to profile re-renders, analyze bundle size, and trace data fetching waterfalls
70- **Implement React feature with proper patterns**: Use `Task` agent to build components following Server Component, Suspense, and React 19 conventions
71- **Design frontend architecture and state management strategy**: Use `Plan` agent to structure component hierarchy, select state management, and plan data fetching approach
72
73> If the `shadcn-ui` skill is available, delegate component variant and theming questions to it.
74> If the `tailwind` skill is available, delegate utility-first styling and design token questions to it.
75> If the `zustand` skill is available, delegate global client state management questions to it.
76
77## References
78
79- [Component patterns, state management, and useEffect decisions](references/component-patterns.md)
80- [Performance optimization: waterfalls, bundles, and re-renders](references/performance-optimization.md)
81- [Hooks, Server Actions, and React 19 APIs](references/hooks-and-actions.md)
82- [React Compiler patterns and re-render optimization](references/react-compiler.md)
83- [Server-side rendering and React Server Components](references/server-side.md)
84- [Anti-patterns and troubleshooting guide](references/anti-patterns.md)
oakoss