⚡ 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

1. Eliminating Waterfalls: The #1 priority. Move fetches as high as possible, parallelize operations, and use cacheSignal to prevent wasted work.
2. React Compiler Optimization: Structuring code to be "Forget-friendly" (automatic memoization) while knowing when manual intervention is still needed.
3. Partial Pre-rendering (PPR): Combining the best of static and dynamic rendering for sub-100ms LCP.
4. Hydration Strategy: Avoiding "hydration mismatch" and using <Activity> for state preservation.

🏆 Top 5 Performance Gains in 2026

1. React Compiler (Automatic Memoization): Removes the "useMemo tax". Code that adheres to "Rules of React" is automatically optimized.
2. Partial Pre-rendering (PPR): Serves static shells instantly while streaming dynamic content in the same request.
3. The use() API: Eliminates the useEffect + useState boilerplate for data fetching, reducing client-side code by up to 30%.
4. cacheSignal: Allows the server to abort expensive async work if the client disconnects or navigates away.
5. Server Actions + useActionState: Native handling of pending states and optimistic updates, reducing reliance on third-party form/state libraries.