react-best-practices

Identify React/Next.js performance bottlenecks and map them to optimization rules.

1|Updated Dec 19, 2025
One-click install
npx skills add https://github.com/fnsalinas/fnsalinas.github.io --skill react-best-practices-fnsalinas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/fnsalinas/fnsalinas.github.io/tree/main/.agent/skills/nextjs-react-expert
Command: npx skills add https://github.com/fnsalinas/fnsalinas.github.io --skill react-best-practices-fnsalinas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js performance optimization guidelines from Vercel Engineering help teams improve load times, reduce waterfalls, shrink bundles, and optimize server/client interactions across projects.

Core Features & Use Cases

  • 57 optimization rules organized into eight sections to guide performance improvements.
  • Prioritized guidance to eliminate waterfalls first, then bundle optimization, then micro-optimizations.
  • Practical patterns for parallel data fetching, server actions, client-side deduplication, and rendering optimizations with concrete code examples.

Quick Start

Identify the current bottleneck and apply the top-priority rules from Section 1 and Section 2 to begin optimizing performance.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I identify and fix React performance bottlenecks?▼

To identify and fix React performance bottlenecks, map your project's issues to 57 optimization rules across eight sections, prioritizing the elimination of waterfalls, bundle size reduction, and micro-optimizations.

What is the best way to eliminate data fetching waterfalls in Next.js?▼

The best way to eliminate data fetching waterfalls in Next.js is applying practical patterns for parallel data fetching and server actions, guided by the top-priority optimization rules from Section 1.

How do I optimize React re-renders and reduce client-side bundle size?▼

Optimize React re-renders and reduce bundle size by applying targeted rules for client-side deduplication, rendering efficiency, and bundle optimization, using provided concrete code examples.

When should I use JavaScript micro-optimizations in a React project?▼

JavaScript micro-optimizations in a React project should be used after addressing data waterfalls and bundle size reduction, following the prioritized guidance to resolve remaining runtime performance issues.

Does this React optimization guidance include a validation checklist?▼

Yes, this React optimization guidance includes a decision tree and validation checklist to map performance bottlenecks to targeted improvements across development, build, and runtime behaviors.

Can I use these rules to improve both server-side and client-side performance?▼

Yes, you can use these rules to improve server-side and client-side performance through specific patterns for server actions, client-side deduplication, and server-client interaction optimizations.