skills.rest
bcassiano
bcassianoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-best-practices

Identify performance bottlenecks and optimization opportunities in React and Next.js projects.

Updated Aug 27, 2026
Search Tags:#performance#react#optimization#next.js#bundling#memoization#server-components
One-click install
npx skills add https://github.com/bcassiano/MariIA --skill react-best-practices-bcassiano
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/bcassiano/MariIA/tree/main/ag_kit_2/.agent/skills/nextjs-react-expert
Command: npx skills add https://github.com/bcassiano/MariIA --skill react-best-practices-bcassiano

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js performance optimization from Vercel Engineering provides a comprehensive, evidence-based blueprint for improving app speed, reliability, and developer velocity by reducing waterfalls, cutting bundle size, and optimizing server/client interactions.

Core Features & Use Cases

  • 57 rules across eight sections, covering waterfalls, bundle size, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns.
  • Practical guidance for performance reviews, code refactors, and migration to server components, with actionable checks and examples.
  • Real-world use cases such as auditing a React app, planning optimizations, and validating improvements with tooling and metrics.

Quick Start

Start by auditing waterfalls (Section 1), then address bundle size (Section 2), and finally apply server/client patterns (Sections 3–8) to ship faster React/Next.js apps.

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 performance bottlenecks in a React application?▼

To optimize Next.js server-side performance, you apply rules targeting waterfalls, server-side rendering, and server/client component patterns. This approach provides actionable checks and practical remediations to systematically improve SSR speed and reliability.

What is the best way to reduce bundle size in a React project?▼

Yes, you can use memoization to prevent unnecessary re-renders by applying specific rendering performance rules. This approach identifies optimization opportunities across client-side data fetching and rendering patterns to systematically improve app speed.

How do I start migrating a React app to server components?▼

Start migrating to server components by auditing waterfalls, then addressing bundle size, and finally applying advanced server/client patterns. This sequence provides a practical blueprint for planning optimizations and validating improvements with tooling.

When do I need to optimize client-side data fetching in React?▼

Yes, this approach works for production React and Next.js applications by providing an evidence-based blueprint for improving speed and reliability. It addresses waterfalls, bundle size, and server/client interactions to improve developer velocity.

Related Skills

Explore More Software Engineering Skills→
drvossdrvoss
42

performance-optimization

Identify performance bottlenecks and validate improvements through measurement-driven optimization.

Community
Advanced
eehnsioeehnsio
1

react-best-practices

Audit React and Next.js projects for performance improvements.

Community
Advanced
trungtnmtrungtnm

vercel-react-best-practices

Identify React/Next.js performance anti-patterns and enforce optimized coding practices.

Community
Advanced
patrickhaahrpatrickhaahr

vercel-react-best-practices

Identify and apply React/Next.js performance best practices for rendering, data fetching, and bundle size.

Community
Basic