React Operations

Comprehensive React skill covering hooks, component architecture, state management, Server Components, and performance optimization.

Hook Selection Decision Tree

What problem are you solving?
│
├─ Storing UI state that triggers re-renders
│  ├─ Simple value (string, number, boolean)
│  │  └─ useState
│  ├─ Complex state with multiple sub-values and logic
│  │  └─ useReducer (actions + reducer = predictable transitions)
│  └─ Derived from existing state
│     └─ Calculate inline or useMemo — not useState
│
├─ Referencing a value WITHOUT triggering re-render
│  ├─ DOM element reference
│  │  └─ useRef<HTMLElement>(null) + ref={ref}
│  └─ Mutable value (timer ID, previous value, counter)
│     └─ useRef (mutate ref.current directly)
│
├─ Running a side effect
│  ├─ After every render (or specific deps)
│  │  ├─ Needs cleanup (subscription, timer, abort)
│  │  │  └─ useEffect with return cleanup function
│  │  └─ No cleanup (logging, analytics)
│  │     └─ useEffect with empty or dep array
│  ├─ Before browser paint (DOM mutation, animation)
│  │  └─ useLayoutEffect
│  └─ Triggered by user action (not render)
│     └─ Call it directly in the event handler — not useEffect
│
├─ Caching an expensive computation
│  └─ useMemo(() => expensiveCalc(a, b), [a, b])
│
├─ Stable callback reference for child props / event handlers
│  └─ useCallback(() => doThing(dep), [dep])
│
├─ Reading shared context value
│  └─ useContext(MyContext)
│
├─ Generating stable unique ID (forms, aria)
│  └─ useId()
│
├─ Syncing external store (Redux, Zustand internals)
│  └─ useSyncExternalStore(subscribe, getSnapshot)
│
└─ React 19+
   ├─ Await a promise or read context
   │  └─ use(promise | context)
   ├─ Form submit state (pending, data, action)
   │  └─ useFormStatus / useActionState
   └─ Optimistic UI before server response
      └─ useOptimistic(state, updateFn)

Component Pattern Decision Tree

What's your composition challenge?
│
├─ Group of related components sharing implicit state
│  (Tabs, Accordion, Select, Menu)
│  └─ Compound Components with Context
│     Parent provides state via Context
│     Children consume via useContext
│
├─ Consumer needs to control rendering output
│  └─ Render Props: children(props) or render={fn}
│     Good for: headless UI, flexible layouts
│
├─ Apply cross-cutting concerns (auth, logging, theming)
│  to multiple components
│  └─ Higher-Order Components (HOC)
│     Wrap with withAuth(Component) or withLogging(Component)
│     Prefer custom hooks for pure logic
│
├─ Encapsulate reusable stateful logic
│  └─ Custom Hook — always prefer over HOC when possible
│     Composable, testable, no wrapper hell
│
├─ Need imperative control from parent (focus, scroll, reset)
│  └─ forwardRef + useImperativeHandle
│
├─ Render content outside DOM hierarchy (modal, tooltip, toast)
│  └─ Portal: createPortal(content, document.body)
│
├─ Accept arbitrary children/slots without prop drilling
│  └─ Slot pattern via children, or named props (header, footer)
│
└─ Polymorphic rendering (button that renders as <a> or div)
   └─ as prop pattern with TypeScript generics

State Management Decision Tree

Where does this state live and who owns it?
│
├─ Only one component needs it
│  └─ useState or useReducer (local state)
│
├─ A few nearby components need it
│  └─ Lift state to nearest common ancestor + prop drilling
│     (2-3 levels is fine)
│
├─ Many components need it, rarely changes
│  (theme, locale, auth user)
│  └─ React Context API
│     Split contexts by update frequency
│     Avoid single giant context
│
├─ Global client state, changes often
│  (shopping cart, UI preferences, navigation)
│  ├─ Simple/small app → Zustand (minimal boilerplate)
│  ├─ Atomic updates, React Suspense integration → Jotai
│  └─ Large team, time-travel debugging, complex logic → Redux Toolkit
│
├─ Server state (remote data, cache, sync)
│  (API data, database queries)
│  └─ TanStack Query (React Query)
│     Handles: caching, background refetch, loading/error
│     Don't use useState + useEffect for server data
│
└─ Form state
   └─ React Hook Form + Zod validation
      (controlled inputs are fine for simple forms)

React 19 Quick Reference

Feature	API	Purpose
use() hook	use(promise) / use(context)	Await promises in render, read context conditionally
Actions	async function action(formData)	Async transitions with built-in pending state
useActionState	useActionState(action, initialState)	Action result + pending state
useFormStatus	useFormStatus()	Pending/data/method inside form
useOptimistic	useOptimistic(state, updateFn)	Optimistic UI before server response
React Compiler	Automatic memoization	Replaces most memo, useMemo, useCallback
ref as prop	<Input ref={ref}>	No more forwardRef wrapper needed
<Context> as provider	<MyContext value={val}>	No more <MyContext.Provider>

// React 19: use() for data fetching in Server Components
import { use } from 'react';

function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise); // suspends until resolved
  return <h1>{user.name}</h1>;
}

// React 19: useActionState
import { useActionState } from 'react';

function ContactForm() {
  const [state, action, isPending] = useActionState(
    async (prevState: State, formData: FormData) => {
      const result = await submitContact(formData);
      return result;
    },
    { error: null }
  );

  return (
    <form action={action}>
      <input name="email" type="email" />
      <button disabled={isPending}>
        {isPending ? 'Sending...' : 'Send'}
      </button>
      {state.error && <p>{state.error}</p>}
    </form>
  );
}

Server vs Client Components

Does this component need...?
│
├─ useState, useReducer, useContext
│  └─ Client Component ('use client')
│
├─ useEffect, useLayoutEffect
│  └─ Client Component ('use client')
│
├─ Browser APIs (window, document, localStorage)
│  └─ Client Component ('use client')
│
├─ Event handlers (onClick, onChange, onSubmit)
│  └─ Client Component ('use client')
│
├─ Third-party libraries that use hooks/browser APIs
│  └─ Client Component ('use client')
│
├─ Direct database/file system access
│  └─ Server Component (default, no directive)
│
├─ Access to env vars (server-only secrets)
│  └─ Server Component
│
├─ Large dependencies you want to keep off the client bundle
│  └─ Server Component
│
└─ async/await at the top level
   └─ Server Component

Client boundary rules:

• 'use client' marks a boundary — everything imported below it becomes client JS
• Server Components can import Client Components (they pass as props/children)
• Client Components CANNOT import Server Components directly
• Pass Server Component output as children prop to Client Components
• Server data → Client: pass as serializable props only (no functions, classes, DOM nodes)

Performance Checklist

Technique	When to Use	When NOT to Use
React.memo	Component re-renders often with same props	Nearly everything — adds comparison overhead
useMemo	Expensive calculation (>1ms), stable dep array	Primitive values, simple expressions
useCallback	Callback passed to memoized child or in dep array	Inline handlers on DOM elements
React.lazy + Suspense	Large components not needed on initial load	Small components, SSR-critical content
useTransition	Non-urgent state updates (filtering, sorting)	Time-sensitive UI (typing, hover)
useDeferredValue	Derived expensive render from fast-changing value	Same as above
Virtualization	Lists >100 items	Small lists — overhead not worth it
React Compiler (v19)	Automatic — replaces most manual memoization	Opt-out with "use no memo" if needed

Common Gotchas

Gotcha	Why It Happens	Fix
Stale closure in useEffect	Callback captures old state/prop at definition time	Add value to dep array, or use functional update setState(prev => ...)
Missing useEffect dependency	Linter disabled or ignored, stale data shown	Never disable exhaustive-deps; use useCallback to stabilize functions
Index as list key	Keys change on reorder/insert, causing wrong component identity	Use stable unique ID from data (item.id)
Hydration mismatch	Server HTML doesn't match first client render	Avoid typeof window, random values, or dates in render; use useEffect for client-only content
Unnecessary re-renders from context	All consumers re-render when any context value changes	Split context by concern; memoize context value with useMemo
useEffect for derived state	State derived from another state causes extra render cycle	Compute derived value during render inline or with useMemo
Missing cleanup in useEffect	Memory leaks from subscriptions, timers, fetch requests	Always return cleanup function; use AbortController for fetch
Strict Mode double invocation	Effects run twice in dev to catch bugs	Design effects to be idempotent; cleanup must fully reverse effect
Controlled/uncontrolled switch	value prop toggling between defined and undefined	Always provide defined value or always use defaultValue; never both
Object/array in dep array	New reference every render triggers effect repeatedly	Memoize with useMemo; use primitive values in deps where possible
Async function directly in useEffect	useEffect(() => async () => {}) returns a Promise, not cleanup	Wrap: useEffect(() => { async function run() {...}; run(); }, [])

Reference Files

File	When to Load
./references/hooks-patterns.md	Deep hook usage: custom hooks, React 19 hooks, useEffect patterns, hook composition
./references/component-architecture.md	Compound components, HOC, render props, portals, forwardRef, polymorphic components
./references/state-management.md	Context API, Zustand, Jotai, Redux Toolkit, TanStack Query, React Hook Form
./references/server-components.md	RSC architecture, Server Actions, Next.js App Router, caching, streaming, metadata
./references/performance.md	React.memo, code splitting, virtualization, React Compiler, Web Vitals, profiling
./references/testing.md	RTL queries, user-event, MSW, renderHook, Vitest setup, accessibility testing

See Also

Skill	When to Combine
typescript-ops	TypeScript generics with React props, discriminated unions for state machines, utility types
testing-ops	Test strategy, mocking patterns, CI integration, snapshot vs behavioral tests
tailwind-ops	CSS-in-JS alternatives, responsive design with Tailwind in React components
javascript-ops	Async patterns, Promises, generators, module system fundamentals