vercel-react-best-practices

To optimize React and Next.js performance, apply comprehensive rules covering data fetching, bundle size, server-side rendering, and re-render optimization. This eliminates waterfalls and reduces JavaScript bundle overhead for smoother user experiences.

Eliminating waterfalls in Next.js server-side data fetching requires restructuring sequential awaits into parallel data retrieval patterns. This skill provides concrete correct vs. incorrect code examples to guide automated refactoring for quicker server responses.

Reducing React bundle size involves avoiding barrel imports that pull unnecessary modules into the bundle. Applying specific optimization patterns from this skill ensures only required code is included, significantly cutting down the final JavaScript payload.

Excessive React re-renders occur when component props or state changes trigger unnecessary DOM updates. Optimize rendering performance by implementing advanced patterns and memoization techniques detailed in these best practice rules.

Yes, AI agents can automatically refactor React codebases using these detailed Vercel best practices. The skill provides concrete rules with code examples specifically designed for automated refactoring and code generation to improve overall performance.