vercel-react-best-practices

To optimize React performance, this Skill provides over 40 guidelines to minimize unnecessary re-renders, enhance rendering speed, and apply micro-optimizations for JavaScript execution. It targets bottlenecks to improve overall UI responsiveness and resource efficiency.

The best way to eliminate data fetching waterfalls is by applying best practices that reduce sequential execution and network latency. This Skill guides asynchronous operation refactoring to optimize both client-side and server-side data fetching patterns.

To reduce bundle size, this Skill offers optimization guidelines that ensure minimal payload size for faster initial load times. It helps identify critical bottlenecks and apply advanced implementation patterns to streamline data transfer.

Yes, these best practices apply to both client and server components in Next.js. The Skill requires a deep understanding of Next.js features to enhance server-side rendering efficiency and optimize client-side data fetching patterns.

Slow rendering in large-scale React applications often stems from unoptimized data fetching and rendering requirements. This Skill addresses performance bottlenecks by providing advanced patterns and rendering performance enhancements.

To start refactoring React code, build the AGENTS.md file by running `pnpm build` to view a compiled list of performance best practices. You can then use these guidelines to systematically address execution time and data transfer size.