react-best-practices

Topics in the source

• React Best Practices - Performance Optimization
• When to use this skill
• Quick reference
• Critical priorities
• Common patterns
• Using the guidelines
• Categories overview
• 1. Eliminating Waterfalls (CRITICAL)

Comprehensive performance optimization guide for React and Next.js applications with 40+ rules organized by impact level. Designed to help developers eliminate performance bottlenecks and follow best practices. Use React Best Practices when: Optimizing React or Next.js application performance Reviewing code for performance improvements Refactoring existing components for better performance Implementing new features with performance in mind Debugging slow rendering or loading issues Reducing bundle size Eliminating request waterfalls Key areas covered: Eliminating Waterfalls (CRITICAL): Prevent sequential async operations Bundle Size Optimization (CRITICAL): Reduce initial JavaScript payload Server-Side Performance (HIGH): Optimize RSC and data fetching Client-Side Data Fetching (MEDIUM-HIGH): Implement efficient caching Re-render Optimization (MEDIUM): Minimize unnecessary re-renders Rendering Performance (MEDIUM): Optimize browser rendering JavaScript Performance (LOW-MEDIUM): Micro-optimizations for hot paths Advanced Patterns (LOW): Specialized techniques for edge cases 1. Defer await until needed - Move awaits into branches where they're used 2. Use Promise.all() - Parallelize

This is an excerpt. Refer to the complete source and its current requirements.