vercel-react-best-practices

To optimize React and Next.js performance during refactoring, apply priority-guided rules across categories like asynchronous optimization, bundle imports, and rendering performance to systematically improve load times and reduce bundle size.

Next.js bundle optimization and data fetching best practices include using specific bundle import patterns, implementing server actions, and applying suspense boundaries to streamline asynchronous operations and reduce initial load overhead.

Review React performance in pull requests by checking code against codified rules prioritized by impact, focusing on component rendering efficiency, data fetching structures, and bundle size implications to ensure faster app performance.

You need suspense boundaries in Next.js applications when optimizing asynchronous rendering and data fetching operations, which prevents blocking the main thread and improves perceived load performance for users.

Yes, these React best practices apply to writing new components, reviewing existing code, and refactoring legacy pages, providing concrete guidance for automated refactoring across various project stages.

A large Next.js bundle size often results from inefficient imports and rendering patterns; fix it by applying targeted bundle optimization rules and asynchronous optimization techniques during code generation and refactoring.