react▌

Modern React patterns and best practices for production applications. \n \n Covers component design principles, hook extraction patterns, and state management selection across complexity levels from simple useState to global stores like Zustand and Redux Toolkit \n Includes React 19 patterns with new hooks (useActionState, useOptimistic, use) and compiler benefits for automatic memoization \n Provides composition patterns including compound components, render props vs hooks trade-offs, and highe

33 React performance and composition rules across bundle optimization, re-rendering, rendering, hooks, and component patterns. \n \n Covers 6 rule categories: bundle size optimization (barrel imports, conditional loading, preloading), re-render prevention (functional setState, derived state, memoization), rendering performance (content-visibility, hydration, transitions), client patterns (passive listeners, localStorage versioning), hooks best practices (limiting useEffect, named functions), and

45 performance optimization rules for React and Next.js, organized by impact from critical waterfalls and bundle size down to advanced patterns. \n \n Covers 8 rule categories prioritized by performance impact: eliminating waterfalls, bundle optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns \n Each rule includes explanations, incorrect/correct code examples, and context to guide automated

Essential React Hooks for sensors, UI, animations, side-effects, lifecycles, and state management. \n \n 30+ sensor hooks track browser APIs and device interfaces including geolocation, keyboard input, scroll position, network state, and device motion \n 9 UI hooks manage audio, video, fullscreen, drag-and-drop, speech synthesis, and click-away detection \n 8 animation hooks provide requestAnimationFrame loops, intervals, timeouts, spring dynamics, and tweening \n 16 side-effect hooks handle asy

Modern React UI patterns for loading states, error handling, and data fetching. \n \n Covers five core principles: never show stale UI, always surface errors, use optimistic updates, progressive disclosure, and graceful degradation \n Provides decision trees and component patterns for loading indicators, skeleton screens, error states, empty states, and button submission handling \n Includes critical anti-patterns to avoid, such as showing spinners when cached data exists, silently swallowing er

Exhaustive React API research from authoritative sources, not training knowledge. \n \n Spawns six parallel research agents to systematically search React's test files, source code, git history, PRs, issues, and type definitions \n Enforces skepticism mandate: treats source material as sole authority and flags discrepancies between findings and common understanding \n Generates documented research with exact file paths, line numbers, and source links for every claim, code example, and warning \n

Convert JSON specs into React component trees with type-safe props and state management. \n \n Define catalogs with Zod schemas for component props, then implement components with automatic type safety and validation \n Built-in state management via StateProvider with two-way binding ( $bindState ), conditional rendering, and external store integration (Redux, Zustand, XState) \n Event system with action dispatching, state watchers, and four built-in actions (setState, pushState, removeState, va

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

Sentry error monitoring, session replay, and tracing for React applications. \n \n Install @sentry/react and initialize via instrument.js (imported first in your entry point) with DSN configuration \n Supports error capture via React 19+ error hooks or ErrorBoundary component for earlier versions \n Includes browser tracing, session replay, and Redux integration; router integrations available for React Router (v4–v7) and TanStack Router \n Source map upload via @sentry/wizard enables readable st

45 performance optimization rules for React and Next.js, organized by impact and category. \n \n Covers 8 rule categories from eliminating waterfalls and bundle optimization (critical) through JavaScript performance and advanced patterns (low priority) \n Each rule includes explanation, before/after code examples, and context to guide automated refactoring and code generation \n Prioritized by impact: waterfalls and bundle size are critical; server-side performance and re-render optimization are