react-best-practices

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
8	Advanced patterns	stable refs and callback patterns for edge cases

Hard Rules

1. Eliminate Waterfalls First

• Start independent requests in parallel.
• Do not serialize async work unless there is a real dependency.
• In API routes and server components, create promises early and await them as late as possible.
• Use Suspense boundaries when streaming content helps unblock rendering.

2. Protect Bundle Size

• Prefer direct imports over barrel files on hot paths.
• Use dynamic imports for heavy or infrequently used components.
• Defer analytics, logging, and other non-critical third-party code until after hydration.
• Load optional modules only when the related feature is activated.

3. Prefer Server Work Over Client Work

• Keep data fetching and heavy transformation on the server when possible.
• Minimize data serialized into client components.
• Cache server-side repeated work when the request model allows it.