What problem does it solve? React and Next.js code often ships with hidden performance problems: async waterfalls blocking pages, broken memoization, duplicate RSC serialization, and bloated bundles. This Skill provides curated, non-obvious performance rules that AI assistants and developers commonly get wrong when writing or reviewing React code. ## Core Features & Use Cases - Async & Data Fetching Optimization: Eliminate waterfalls with Suspense boundaries, defer awaits to the branches that need them, and use React.cache() correctly with primitive arguments. - RSC & Server Component Guidance: Avoid duplicate serialization from array transforms, authenticate inside Server Actions, and use Next.js after() for non-blocking side effects. - Re-render & Bundle Reduction: Derive state during render instead of useEffect, keep memo() effective with stable defaults, and shrink bundles via direct imports and intent-based preloading. - Use Case: When reviewing a Next.js page that loads slowly, apply these rules to move data fetching into Suspense-wrapped child components, fix cache-missing React.cache() calls, and replace barrel imports with optimizePackageImports. ## Quick Start Review my React component and Next.js page for performance issues using the react-performance rules and suggest concrete fixes.
