vercel-react-best-practices

Optimize React performance by applying patterns like avoiding data waterfalls, minimizing serialization, and leveraging Suspense or startTransition to improve rendering across client and server. This guides code reviews and refactoring to reduce bottlenecks.

Prevent data fetching waterfalls by parallelizing data requests and leveraging React.cache. This pattern minimizes serialization and reduces bottlenecks during server-side rendering and client-side fetching.

Reduce bundle size by applying targeted bundling improvements and optimization patterns. This approach identifies high-impact opportunities to eliminate unnecessary code and improve JavaScript performance across the application.

Use Suspense and SWR for client-side data fetching to optimize re-renders and manage loading states. These patterns help structure data fetching to avoid waterfalls and improve overall user experience.

Yes, you can refactor existing components by applying actionable rules and real-world examples to optimize server-side performance. The process audits code to implement concrete changes across both server and client contexts.

Slow re-renders occur from inefficient state updates and data fetching. Fix them by applying advanced patterns like startTransition, SWR, and React.cache to minimize serialization and optimize rendering performance.