React Best Practices
Independent PiSkill directory guide. The original skill remains hosted by Vercel Agent Skills.
What is React Best Practices?
Applies Vercel Engineering's React and Next.js performance guidance when writing, reviewing, or refactoring components, data fetching, bundles, rendering, and server-side code.
What does React Best Practices do?
React Best Practices is a Vercel Agent Skill for improving performance in React and Next.js applications. It organizes dozens of engineering rules by impact, with highest priority on eliminating async waterfalls and unnecessary bundle cost before moving into server, client, rerendering and lower-level JavaScript optimizations.
Who is React Best Practices best for?
- React and Next.js developers reviewing performance
- AI agents refactoring frontend code
- Teams reducing bundle size and request waterfalls
- Projects improving server rendering and client responsiveness
Common use cases
- Parallelize independent asynchronous work
- Reduce heavy or unnecessary client bundles
- Optimize server-side data fetching and serialization
- Reduce avoidable React rerenders and expensive rendering work
How does React Best Practices work?
The skill reviews code against prioritized performance categories and applies the highest-impact rules first. It looks for waterfalls, broad imports and bundles, server-side inefficiencies, client data patterns, rerender issues, rendering problems and lower-level JavaScript opportunities, then uses focused rule references for the relevant fix.
Key benefits
- Prioritizes changes by likely impact
- Covers both React and Next.js server/client behavior
- Useful for generation, review and refactoring
- Provides concrete rule-level guidance rather than generic performance advice
Things to know
- Not every rule applies to every application
- Performance changes should still be measured in the real product
- Some recommendations depend on current React and Next.js capabilities
Compatible tools
Frequently asked questions
What does the React Best Practices skill optimize first?
Can it review existing React code?
Related skills
Next.js Cache Components Adoption
Guides a Next.js App Router project through enabling Cache Components and resolving blocking routes until the application builds and navigates correctly under the new caching model.
Next.js Partial Prefetching Adoption
Guides adoption of Next.js Partial Prefetching by auditing link behavior, enabling the feature, resolving surfaced issues, and deciding which routes merit deeper runtime prefetching.
React Router Data Mode
Guides React Router data-mode applications using createBrowserRouter and RouterProvider, including route objects, loaders, actions, forms, pending UI, and optimistic updates.
React Router Declarative Mode
Guides declarative React Router applications using BrowserRouter, JSX route configuration, Link and NavLink navigation, and URL parameter handling without data-mode APIs.
React Router Framework Mode
Provides current patterns for full-stack React Router framework-mode applications, including routing, loaders, actions, forms, sessions, middleware, error handling, and rendering strategies.
Web Artifacts Builder
Guides agents in building complex interactive HTML artifacts with a modern frontend stack, including React, TypeScript, Tailwind CSS, component libraries, and bundling.