yuniorglez ⚡ Skill: react-expert
Description
This skill provides comprehensive performance optimization guidance for React applications, optimized for AI-assisted workflows in 2026. It focuses on eliminating waterfalls, leveraging the React Compiler, and maximizing both server and client-side efficiency through modern APIs (use, useActionState, <Activity>).
Core Priorities
- Eliminating Waterfalls: The #1 priority. Move fetches as high as possible, parallelize operations, and use
cacheSignalto prevent wasted work. - React Compiler Optimization: Structuring code to be "Forget-friendly" (automatic memoization) while knowing when manual intervention is still needed.
- Partial Pre-rendering (PPR): Combining the best of static and dynamic rendering for sub-100ms LCP.
- Hydration Strategy: Avoiding "hydration mismatch" and using
<Activity>for state preservation.
🏆 Top 5 Performance Gains in 2026
- React Compiler (Automatic Memoization): Removes the "useMemo tax". Code that adheres to "Rules of React" is automatically optimized.
- Partial Pre-rendering (PPR): Serves static shells instantly while streaming dynamic content in the same request.
- The
use()API: Eliminates theuseEffect+useStateboilerplate for data fetching, reducing client-side code by up to 30%. cacheSignal: Allows the server to abort expensive async work if the client disconnects or navigates away.- Server Actions +
useActionState: Native handling of pending states and optimistic updates, reducing reliance on third-party form/state libraries.
Table of Contents & Detailed Guides
1. Eliminating Waterfalls — CRITICAL
- Defer Await Until Needed
cacheSignalfor Lifecycle Management- Dependency-Based Parallelization (
better-all) Promise.all()for Independent Operations- Strategic Suspense Boundaries
2. Bundle Size Optimization — CRITICAL
- Avoiding Barrel File Imports (Lucide, MUI, etc.)
- Conditional Module Loading (Dynamic
import()) - Deferring Non-Critical Libraries (Analytics)
- Preloading based on User Intent
3. Server-Side Performance — HIGH
- Partial Pre-rendering (PPR) Deep Dive
- Cross-Request LRU Caching
- Minimizing Serialization at RSC Boundaries
- Parallel Data Fetching with Component Composition
4. Client-Side & Data Fetching — MEDIUM-HIGH
use()API for Promises and ContextuseActionStatefor Form ManagementuseOptimisticfor Instant UI Feedback- Deduplicating Global Event Listeners
5. React Compiler & Re-renders — MEDIUM
- Compiler Rules: Side-effect-free rendering
- Deferring State Reads
- Narrowing Effect Dependencies
- Transitions for Non-Urgent Updates (
startTransition)
6. Rendering Performance — MEDIUM
<Activity>Component (Show/Hide with State preservation)- CSS
content-visibility - Hydration Mismatch Prevention (No-Flicker)
- Hoisting Static JSX
7. JavaScript Micro-Optimizations — LOW-MEDIUM
- Batching DOM Changes
- Index Maps vs
.find() toSorted()vssort()
8. Advanced Patterns — LOW
- Event Handlers in Refs /
useEffectEvent useLatestfor Stable Callback Refs
Quick Reference: The "Do's" and "Don'ts"
| Don't | Do |
|---|---|
import { Icon } from 'large-lib' |
import Icon from 'large-lib/Icon' |
await a(); await b(); |
Promise.all([a(), b()]) |
useEffect(() => { fetch(...) }, []) |
const data = use(dataPromise) |
const [state, set] = useState(init()) |
useState(() => init()) |
array.sort() |
array.toSorted() |
searchParams in component body |
searchParams only in callbacks |
Manual useMemo/useCallback (mostly) |
Trust React Compiler (but check Rules of React) |
Optimized for React 19.2+ and Next.js 16.1+. Updated: January 22, 2026 - 14:59