React Best Practices (Vercel, adapted for EquipQR)

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 57 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

EquipQR applicability notes (important)

This repository is Vite + React Router + TypeScript (not Next.js). When applying these rules:

• Next.js-only APIs: Ignore or translate examples referencing next/dynamic, Route Handlers (export async function GET), Server Actions ("use server"), RSC boundaries, or after(). Prefer the underlying principle (avoid waterfalls, reduce payload, parallelize independent work).
• Client data fetching: Examples mention SWR; EquipQR uses TanStack Query v5. Apply the dedup/caching principles using React Query patterns (query keys, caching, de-duping via in-flight queries).
• Code splitting: Translate next/dynamic to React.lazy(() => import(...)) + <Suspense> (and route-level splitting where appropriate).
• Imports & bundle size: The “avoid barrel imports” guidance still applies—prefer direct imports and avoid index.ts re-export barrels in hot paths.

When to Apply