Comprehensive React skill covering hooks, component architecture, state management, Server Components, and performance optimization.
\n\n\nReact 19 ecosystem facts verified as of 2026-07.
\n
What problem are you solving?\n│\n├─ Storing UI state that triggers re-renders\n│ ├─ Simple value (string, number, boolean)\n│ │ └─ useState\n│ ├─ Complex state with multiple sub-values and logic\n│ │ └─ useReducer (actions + reducer = predictable transitions)\n│ └─ Derived from existing state\n│ └─ Calculate inline or useMemo — not useState\n│\n├─ Referencing a value WITHOUT triggering re-render\n│ ├─ DOM element reference\n│ │ └─ useRef<HTMLElement>(null) + ref={ref}\n│ └─ Mutable value (timer ID, previous value, counter)\n│ └─ useRef (mutate ref.current directly)\n│\n├─ Running a side effect\n│ ├─ After every render (or specific deps)\n│ │ ├─ Needs cleanup (subscription, timer, abort)\n│ │ │ └─ useEffect with return cleanup function\n│ │ └─ No cleanup (logging, analytics)\n│ │ └─ useEffect with empty or dep array\n│ ├─ Before browser paint (DOM mutation, animation)\n│ │ └─ useLayoutEffect\n│ └─ Triggered by user action (not render)\n│ └─ Call it directly in the event handler — not useEffect\n│\n├─ Caching an expensive computation\n│ └─ useMemo(() => expensiveCalc(a, b), [a, b])\n│\n├─ Stable callback reference for child props / event handlers\n│ └─ useCallback(() => doThing(dep), [dep])\n│\n├─ Reading shared context value\n│ └─ useContext(MyContext)\n│\n├─ Generating stable unique ID (forms, aria)\n│ └─ useId()\n│\n├─ Syncing external store (Redux, Zustand internals)\n│ └─ useSyncExternalStore(subscribe, getSnapshot)\n│\n└─ React 19+\n ├─ Await a promise or read context\n │ └─ use(promise | context)\n ├─ Form submit state (pending, data, action)\n │ └─ useFormStatus / useActionState\n └─ Optimistic UI before server response\n └─ useOptimistic(state, updateFn)\nWhat's your composition challenge?\n│\n├─ Group of related components sharing implicit state\n│ (Tabs, Accordion, Select, Menu)\n│ └─ Compound Components with Context\n│ Parent provides state via Context\n│ Children consume via useContext\n│\n├─ Consumer needs to control rendering output\n│ └─ Render Props: children(props) or render={fn}\n│ Good for: headless UI, flexible layouts\n│\n├─ Apply cross-cutting concerns (auth, logging, theming)\n│ to multiple components\n│ └─ Higher-Order Components (HOC)\n│ Wrap with withAuth(Component) or withLogging(Component)\n│ Prefer custom hooks for pure logic\n│\n├─ Encapsulate reusable stateful logic\n│ └─ Custom Hook — always prefer over HOC when possible\n│ Composable, testable, no wrapper hell\n│\n├─ Need imperative control from parent (focus, scroll, reset)\n│ └─ forwardRef + useImperativeHandle\n│\n├─ Render content outside DOM hierarchy (modal, tooltip, toast)\n│ └─ Portal: createPortal(content, document.body)\n│\n├─ Accept arbitrary children/slots without prop drilling\n│ └─ Slot pattern via children, or named props (header, footer)\n│\n└─ Polymorphic rendering (button that renders as <a> or div)\n └─ as prop pattern with TypeScript generics\nWhere does this state live and who owns it?\n│\n├─ Only one component needs it\n│ └─ useState or useReducer (local state)\n│\n├─ A few nearby components need it\n│ └─ Lift state to nearest common ancestor + prop drilling\n│ (2-3 levels is fine)\n│\n├─ Many components need it, rarely changes\n│ (theme, locale, auth user)\n│ └─ React Context API\n│ Split contexts by update frequency\n│ Avoid single giant context\n│\n├─ Global client state, changes often\n│ (shopping cart, UI preferences, navigation)\n│ ├─ Simple/small app → Zustand (minimal boilerplate)\n│ ├─ Atomic updates, React Suspense integration → Jotai\n│ └─ Large team, time-travel debugging, complex logic → Redux Toolkit\n│\n├─ Server state (remote data, cache, sync)\n│ (API data, database queries)\n│ └─ TanStack Query (React Query)\n│ Handles: caching, background refetch, loading/error\n│ Don't use useState + useEffect for server data\n│\n└─ Form state\n └─ React Hook Form + Zod validation\n (controlled inputs are fine for simple forms)\n| Feature | \nAPI | \nPurpose | \n
|---|---|---|
use() hook | \nuse(promise) / use(context) | \nAwait promises in render, read context conditionally | \n
| Actions | \nasync function action(formData) | \nAsync transitions with built-in pending state | \n
useActionState | \nuseActionState(action, initialState) | \nAction result + pending state | \n
useFormStatus | \nuseFormStatus() | \nPending/data/method inside form | \n
useOptimistic | \nuseOptimistic(state, updateFn) | \nOptimistic UI before server response | \n
| React Compiler | \nAutomatic memoization | \nReplaces most memo, useMemo, useCallback | \n
ref as prop | \n<Input ref={ref}> | \nNo more forwardRef wrapper needed | \n
<Context> as provider | \n<MyContext value={val}> | \nNo more <MyContext.Provider> | \n
// React 19: use() for data fetching in Server Components\nimport { use } from 'react';\n\nfunction UserProfile({ userPromise }: { userPromise: Promise<User> }) {\n const user = use(userPromise); // suspends until resolved\n return <h1>{user.name}</h1>;\n}\n\n// React 19: useActionState\nimport { useActionState } from 'react';\n\nfunction ContactForm() {\n const [state, action, isPending] = useActionState(\n async (prevState: State, formData: FormData) => {\n const result = await submitContact(formData);\n return result;\n },\n { error: null }\n );\n\n return (\n <form action={action}>\n <input name=\"email\" type=\"email\" />\n <button disabled={isPending}>\n {isPending ? 'Sending...' : 'Send'}\n </button>\n {state.error && <p>{state.error}</p>}\n </form>\n );\n}\nDoes this component need...?\n│\n├─ useState, useReducer, useContext\n│ └─ Client Component ('use client')\n│\n├─ useEffect, useLayoutEffect\n│ └─ Client Component ('use client')\n│\n├─ Browser APIs (window, document, localStorage)\n│ └─ Client Component ('use client')\n│\n├─ Event handlers (onClick, onChange, onSubmit)\n│ └─ Client Component ('use client')\n│\n├─ Third-party libraries that use hooks/browser APIs\n│ └─ Client Component ('use client')\n│\n├─ Direct database/file system access\n│ └─ Server Component (default, no directive)\n│\n├─ Access to env vars (server-only secrets)\n│ └─ Server Component\n│\n├─ Large dependencies you want to keep off the client bundle\n│ └─ Server Component\n│\n└─ async/await at the top level\n └─ Server Component\nClient boundary rules:
\n'use client' marks a boundary — everything imported below it becomes client JSchildren prop to Client Components| Technique | \nWhen to Use | \nWhen NOT to Use | \n
|---|---|---|
React.memo | \nComponent re-renders often with same props | \nNearly everything — adds comparison overhead | \n
useMemo | \nExpensive calculation (>1ms), stable dep array | \nPrimitive values, simple expressions | \n
useCallback | \nCallback passed to memoized child or in dep array | \nInline handlers on DOM elements | \n
React.lazy + Suspense | \nLarge components not needed on initial load | \nSmall components, SSR-critical content | \n
useTransition | \nNon-urgent state updates (filtering, sorting) | \nTime-sensitive UI (typing, hover) | \n
useDeferredValue | \nDerived expensive render from fast-changing value | \nSame as above | \n
| Virtualization | \nLists >100 items | \nSmall lists — overhead not worth it | \n
| React Compiler (v19) | \nAutomatic — replaces most manual memoization | \nOpt-out with \"use no memo\" if needed | \n
| Gotcha | \nWhy It Happens | \nFix | \n
|---|---|---|
| Stale closure in useEffect | \nCallback captures old state/prop at definition time | \nAdd value to dep array, or use functional update setState(prev => ...) | \n
| Missing useEffect dependency | \nLinter disabled or ignored, stale data shown | \nNever disable exhaustive-deps; use useCallback to stabilize functions | \n
| Index as list key | \nKeys change on reorder/insert, causing wrong component identity | \nUse stable unique ID from data (item.id) | \n
| Hydration mismatch | \nServer HTML doesn't match first client render | \nAvoid typeof window, random values, or dates in render; use useEffect for client-only content | \n
| Unnecessary re-renders from context | \nAll consumers re-render when any context value changes | \nSplit context by concern; memoize context value with useMemo | \n
| useEffect for derived state | \nState derived from another state causes extra render cycle | \nCompute derived value during render inline or with useMemo | \n
| Missing cleanup in useEffect | \nMemory leaks from subscriptions, timers, fetch requests | \nAlways return cleanup function; use AbortController for fetch | \n
| Strict Mode double invocation | \nEffects run twice in dev to catch bugs | \nDesign effects to be idempotent; cleanup must fully reverse effect | \n
| Controlled/uncontrolled switch | \nvalue prop toggling between defined and undefined | \nAlways provide defined value or always use defaultValue; never both | \n
| Object/array in dep array | \nNew reference every render triggers effect repeatedly | \nMemoize with useMemo; use primitive values in deps where possible | \n
| Async function directly in useEffect | \nuseEffect(() => async () => {}) returns a Promise, not cleanup | \nWrap: useEffect(() => { async function run() {...}; run(); }, []) | \n
| File | \nWhen to Load | \n
|---|---|
./references/hooks-patterns.md | \nDeep hook usage: custom hooks, React 19 hooks, useEffect patterns, hook composition | \n
./references/component-architecture.md | \nCompound components, HOC, render props, portals, forwardRef, polymorphic components | \n
./references/state-management.md | \nContext API, Zustand, Jotai, Redux Toolkit, TanStack Query, React Hook Form | \n
./references/server-components.md | \nRSC architecture, Server Actions, Next.js App Router, caching, streaming, metadata | \n
./references/performance.md | \nReact.memo, code splitting, virtualization, React Compiler, Web Vitals, profiling | \n
./references/testing.md | \nRTL queries, user-event, MSW, renderHook, Vitest setup, accessibility testing | \n
This skill encodes fast-moving facts (the React 19 API surface, the ecosystem\npackage stack). scripts/check-react-facts.py\nguards them against silent drift — internal consistency in PR CI, live\nmajor-version drift in the scheduled freshness job:
# Structural (PR CI, no network): every catalogued package + React 19 gate is\n# still named in this skill's prose, and the currency note still carries a year.\npython3 skills/react-ops/scripts/check-react-facts.py --offline # exit 0 consistent, 10 drift\n\n# Live (weekly freshness job, never blocks a PR): is any documented major\n# now behind npm's latest dist-tag?\npython3 skills/react-ops/scripts/check-react-facts.py --live # exit 10 a major moved ahead, 7 npm unreachable\nThe canonical fact list lives in assets/react-facts.json; when you add or drop a recommendation or the prose stops naming one, update it to match or --offline fails CI.
| Skill | \nWhen to Combine | \n
|---|---|
typescript-ops | \nTypeScript generics with React props, discriminated unions for state machines, utility types | \n
testing-ops | \nTest strategy, mocking patterns, CI integration, snapshot vs behavioral tests | \n
tailwind-ops | \nCSS-in-JS alternatives, responsive design with Tailwind in React components | \n
javascript-ops | \nAsync patterns, Promises, generators, module system fundamentals | \n