vercel-react-best-practices

To optimize React and Next.js performance, apply proven patterns for component rendering, efficient data fetching, and bundle size reduction. This eliminates slow data-fetching chains, oversized imports, and hydration issues to improve overall speed.

To eliminate async waterfalls in Next.js data fetching, apply prioritized optimization rules that restructure sequential requests. This prevents waterfall delays and ensures more efficient parallel data retrieval for server rendering.

Reviewing React code for performance issues involves comparing incorrect and correct examples to identify inefficient component patterns. This guides refactoring workflows to minimize unnecessary re-renders and improve rendering speed.

Yes, this approach works for AI-assisted code generation and refactoring workflows by providing agents with structured performance rules and categorized optimization guidance to automate concrete code improvements.

You should reduce bundle size and fix hydration issues in a React frontend when identifying oversized imports and server rendering mismatches. Applying optimization guidelines resolves these common performance bottlenecks.