| name | react-19 |
| description | React 19.3+ patterns. Use for forms, async data, pre-rendering, transitions, refs, context, metadata. |
React 19.3+
Avoid → Use
useState+onChangefor forms →useActionState→examples/form-action.tsxawaitin server components → pass promise,use()in client →examples/use-server-promise.tsxforwardRef→refas propuseCallback/useMemo→ compiler handles ituseContext→use(Context)Context.Provider→<Context value={}>- Manual state reset on prop change →
keyprop
Patterns
- Forms:
useActionState(fn, init)+useOptimistic+useFormStatus→examples/form-action.tsx - Pre-rendering:
<Activity mode="hidden">→examples/activity-prerender.tsx - Effect events:
useEffectEvent()for non-reactive logic in effects →examples/effect-event.tsx - Async data: pass promise from server, unwrap with
use()→examples/use-server-promise.tsx - ViewTransition: wrap elements, use
startTransition()+addTransitionType()→examples/view-transition.tsx - Mutations outside forms:
useTransition+ Server Action →examples/server-action-mutation.tsx - Suspense:
<Suspense fallback={...}>wraps async components - Deferred value:
useDeferredValue(value, initialValue) - Request memoization:
cache(async fn)withcacheSignal() - Server Action:
"use server"+revalidatePath()/revalidateTag() - Metadata:
<title>,<meta>,<link>hoisted to<head> - Refs:
refas prop, cleanup via return function
Component structure
- One component per file
- Inner functions use arrow syntax:
const handleX = () => {}