React

The skill is based on React 19.2 docs (react.dev latest), generated at 2026-02-13.

React 19.2 centers around pure components, Hook-based state, Action-driven forms, concurrent rendering primitives, and stronger compile-time optimization through React Compiler.

Preferences

• Prefer TypeScript and function components.
• Keep Effects for external synchronization only.
• Use Action patterns for form submissions and optimistic updates.
• Treat React Compiler as default optimization, add manual memoization only for measured hotspots.

Core

Topic	Description	Reference
State Model	State snapshots, update queues, reducers, and context composition	core-state-model
Effects & Effect Events	Correct dependency modeling, cleanup, and useEffectEvent patterns	core-effects-and-events

Features

Topic	Description	Reference
Actions & Forms	<form action>, useActionState, useFormStatus, useOptimistic	features-actions-and-forms
Transitions & Suspense	useTransition, startTransition, useDeferredValue, Suspense	features-transitions-and-suspense
Async Resources	use(resource) and server-only cache() patterns	features-async-resources

Best Practices

Topic	Description	Reference
Purity & Hook Rules	Hook call constraints, immutable data flow, and "you might not need an effect"	best-practices-purity-and-hooks-rules

Advanced

Topic	Description	Reference
SSR & Hydration	Streaming HTML, hydration constraints, and mismatch prevention	advanced-ssr-and-hydration
React Compiler	Compiler modes, directives, rollout strategy, and safety controls	advanced-react-compiler

Quick Reference

Core Packages

npm i react react-dom
npm i -D @types/react @types/react-dom

Root APIs

import { createRoot, hydrateRoot } from 'react-dom/client'
import { renderToPipeableStream } from 'react-dom/server'

Form + Action Shape

const [state, formAction, isPending] = useActionState(action, initialState)

return (
  <form action={formAction}>
    <button disabled={isPending}>Submit</button>
  </form>
)