react-best-practices

name	react-best-practices
description	React and Next.js performance playbook distilled from Vercel Engineering guidance. Use when building, reviewing, or refactoring React/Next.js code for waterfalls, bundle size, rendering cost, and client/server data flow.

React Best Practices

Practical React and Next.js guidance for performance-sensitive product work.

This skill is a self-contained distillation of the Vercel React performance guidance so it can be installed and used directly inside Spellbook.

When To Use

Use this skill when the user asks to:

• build or refactor React components
• improve Next.js performance
• reduce bundle size
• remove data-fetch waterfalls
• fix expensive rerenders
• review frontend code for performance issues

Priority Order

Always check higher-priority categories first.

Priority	Category	Focus
1	Waterfalls	start async work early, await late, parallelize independent fetches
2	Bundle size	avoid barrel imports, defer heavy code, split by feature
3	Server-side performance	dedupe work, minimize serialization, prefer server execution
4	Client data fetching	dedupe requests, avoid redundant listeners and client churn
5	Rerenders	reduce subscriptions, stabilize dependencies, move expensive work
6	Rendering	avoid hydration flicker, reduce DOM/SVG cost, optimize long lists
7	JavaScript hot paths	cache repeated lookups, combine iterations, exit early