skills.rest
raccioly
racciolyCOMMUNITY
Explore all skills by this author →
GitHub

react-best-practices

Audit React and Next.js apps for performance bottlenecks and apply optimization rules.

Updated Mar 18, 2026
Search Tags:#performance#react#optimization#nextjs#bundling#memoization
One-click install
npx skills add https://github.com/raccioly/coach-gravity --skill react-best-practices-raccioly
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/raccioly/coach-gravity/tree/main/content/starter-kit/skills/nextjs-react-expert
Command: npx skills add https://github.com/raccioly/coach-gravity --skill react-best-practices-raccioly

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js performance optimization patterns help teams identify and fix bottlenecks that cause waterfalls, bloated bundles, and slow UIs, enabling faster, more reliable web experiences.

Core Features & Use Cases

  • 57 rules organized into eight sections addressing waterfalls, bundle size, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript micro-optimizations, and advanced patterns.
  • Practical guidance on parallel data fetching, memoization, dynamic imports, and server components to improve real user performance.
  • Use cases include auditing large React apps, applying incremental improvements, and validating performance gains with quick audits.

Quick Start

Run a performance audit on your React app and implement top-priority rules to eliminate waterfalls, shrink bundles, and optimize rendering.

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 in my application?▼

Fix React performance bottlenecks by applying 57 structured rules covering waterfall elimination, bundle minimization, SSR/CSR efficiency, and memoization to reduce bloat and improve UI reliability.

What's the best way to reduce data fetching waterfalls in Next.js?▼

Reduce data fetching waterfalls in Next.js by implementing parallel data fetching and leveraging server components. These performance patterns minimize sequential requests and improve real user rendering times.

How do I use memoization to optimize React re-render performance?▼

Optimize React re-render performance using memoization strategies alongside dynamic imports. Applying these patterns prevents unnecessary component re-renders and improves overall client-side rendering efficiency.

Can I apply these React optimization rules to an existing large codebase?▼

You can apply these React optimization rules to large existing apps through incremental improvements. The framework provides practical guidance and auditing scripts to validate performance gains as you refactor.

Does this approach work for both server-side rendering and client-side rendering in Next.js?▼

Yes, this approach works for both server-side and client-side rendering in Next.js. It provides targeted rules to improve SSR and CSR data fetching efficiency, ensuring faster page loads across rendering strategies.

Related Skills

Explore More Software Engineering Skills→
ZESCODEZESCODE

react-performance

Optimize React and Next.js performance through waterfall elimination, bundle reduction, and rendering efficiency.

Community
Advanced
HieubkavHieubkav

web-performance-audit

Measure Core Web Vitals and identify web performance bottlenecks.

Community
Advanced
p-potvinp-potvin
1

vercel-react-best-practices

Review React and Next.js code for performance bottlenecks and bundle size.

Community
Intermediate
ihj04982ihj04982

prevent-hydration-mismatch-without-flickering

Inject a synchronous script to update the DOM before React hydration.

Community
Basic