react-best-practices

Applies Vercel's React and Next.js performance optimization rules when writing or refactoring code.

7|Updated May 13, 2026
One-click install
npx skills add https://github.com/DawnMoon1542/agents-skills --skill react-best-practices-dawnmoon1542
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/DawnMoon1542/agents-skills/tree/main/react-best-practices
Command: npx skills add https://github.com/DawnMoon1542/agents-skills --skill react-best-practices-dawnmoon1542

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? React and Next.js codebases often suffer from performance issues like data-fetching waterfalls, bloated bundles, unnecessary re-renders, and serialization overhead. This Skill provides 45 prioritized, impact-rated rules from Vercel Engineering so AI agents and developers consistently apply proven optimization patterns during code generation, review, and refactoring. ## Core Features & Use Cases - Waterfall Elimination: Rules for parallelizing async operations with Promise.all(), better-all, strategic Suspense boundaries, and deferred awaits. - Bundle Size Optimization: Guidance on avoiding barrel file imports, dynamic imports for heavy components, and deferring third-party libraries. - Server & Client Performance: Covers React.cache() deduplication, LRU caching, RSC serialization minimization, SWR usage, re-render reduction, and JavaScript micro-optimizations. - Use Case: When asked to refactor a slow Next.js page, the agent consults rules like async-parallel and server-parallel-fetching to restructure sequential data fetches into parallel ones, cutting response latency. ## Quick Start Ask the agent to review your React component or Next.js page for performance issues and apply the relevant best-practice rules.

Frequently Asked Questions about react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I eliminate data fetching waterfalls in Next.js?▼

Start independent promises immediately and await them together with Promise.all(), or use better-all for partial dependency chains. In Server Components, restructure with component composition so sibling components fetch in parallel instead of sequentially.

How to reduce bundle size from barrel file imports?▼

Import directly from source files instead of barrel entry points, which can load thousands of unused modules. In Next.js 13.5+, enable optimizePackageImports in next.config.js to automatically transform barrel imports at build time.

When should I use React.cache() versus an LRU cache?▼

React.cache() deduplicates calls within a single request, ideal for auth checks and database queries in one render pass. Use an LRU cache like lru-cache when data must persist across sequential requests, such as repeated user actions hitting multiple endpoints.

Does this guide work with React Server Components?▼

Yes, several rules specifically address RSC concerns: minimizing serialization at server-client boundaries, avoiding duplicate serialization of derived props, and parallelizing data fetching through component composition in async Server Components.

Why does my React app re-render too often?▼

Common causes include subscribing to state only used in callbacks, wide effect dependencies, and unstable callback references. The re-render rules recommend deferring state reads, narrowing effect dependencies, using functional setState, and applying startTransition for non-urgent updates.

When should I not use Suspense boundaries for data fetching?▼

Avoid Suspense when data drives layout decisions, when content is SEO-critical above the fold, when queries are small and fast, or when layout shift from loading states harms the user experience more than the delayed initial paint.