react-patterns

name	react-patterns
description	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. Use when building components, optimizing re-renders, fetching data, managing state, handling forms, structuring frontends, or reviewing React code.
license	MIT
metadata	{"author":"oakoss","version":"1.1","source":"https://react.dev"}
user-invocable	false

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