skills.rest
ForeverWorld
ForeverWorldCOMMUNITY
Explore all skills by this author →
GitHub

react-best-practices

Optimize React and Next.js code to eliminate performance regressions.

Updated Aug 23, 2026
Search Tags:#performance#caching#react#nextjs#code-review#data-fetching#bundle-optimization
One-click install
npx skills add https://github.com/ForeverWorld/curdx-ralph --skill react-best-practices-foreverworld
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/ForeverWorld/curdx-ralph/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/ForeverWorld/curdx-ralph --skill react-best-practices-foreverworld

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Large React and Next.js codebases suffer from performance regressions caused by sequential data-fetching waterfalls, oversized bundles, unnecessary re-renders, and excessive server-client serialization. These issues increase time-to-interactive, LCP, and operational cost while making applications harder to maintain and scale. This guide translates Vercel's engineering rules into actionable patterns for writing, reviewing, and automated refactoring.

Core Features & Use Cases

  • Targeted Rules: 57 structured rules across 8 categories (eliminating waterfalls, bundle optimization, server-side performance, client fetching, re-rendering, rendering, JS micro-optimizations, advanced patterns).
  • Agent-Friendly Guidance: Clear incorrect/correct examples and impact metrics enable LLMs and automation tools to suggest deterministic code changes and refactors.
  • Real-world Use Case: Audit a Next.js app to convert sequential awaits to Promise.all/better-all, replace barrel imports with direct imports, add Suspense boundaries, and minimize RSC props to reduce payload and improve TTI.

Quick Start

Use the react-best-practices skill to audit and refactor the Next.js page at src/app/dashboard/page.tsx for bundle size, waterfall elimination, and RSC serialization.

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?▼

Eliminate Next.js data-fetching waterfalls by parallelizing requests with Promise.all and applying dependency-based parallelization. This refactoring approach replaces sequential awaits with deferred awaits to reduce latency and improve time-to-interactive.

What is the best way to optimize React bundle size and reduce unnecessary re-renders?▼

Optimize React bundle size by replacing barrel imports with direct imports and using dynamic imports. Minimize unnecessary re-renders and RSC serialization payload by adding Suspense boundaries and minimizing props passed to client components.

Can I use these React performance rules to audit an existing production codebase?▼

Yes, you can audit existing production codebases using 57 structured rules across 8 categories. The guide provides incorrect and correct examples with impact metrics to automate deterministic code changes for refactoring Next.js pages and API routes.

How does React.cache and LRU caching improve server-side performance?▼

React.cache and LRU caching improve server-side performance by memoizing data requests and reducing redundant fetches. Applying these caching strategies minimizes server-client serialization and lowers operational costs in large React applications.

When should I add Suspense boundaries to optimize React Server Components?▼

Add Suspense boundaries when you need to minimize RSC serialization and reduce the payload sent to the client. This rendering pattern helps control time-to-interactive and LCP metrics by strategically deferring component rendering during data fetching.

Related Skills

Explore More Software Engineering Skills→
darthlinuxerdarthlinuxer

nextjs-react-expert

Detect sequential async waterfalls and large bundle imports in Next.js and React codebases.

Community
Advanced
Rafaelp122Rafaelp122
2

vercel-react-best-practices

Optimize React and Next.js codebases for runtime performance and bundle size.

Community
Advanced
adibfirmanadibfirman
2

vercel-react-best-practices

Apply Vercel performance rules to refactor React and Next.js code.

Community
Advanced
keshavraj936keshavraj936

performance-profiling

Run Lighthouse audits and analyze Core Web Vitals for web performance.

Community
Intermediate