Agent skill · writing content · davila7
react-best-practices
Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering. Use when optimizing React apps, reviewing performance, or refactoring components.
Why this skill is useful
Provides specific performance optimization techniques and patterns for React and Next.js that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
React Best Practices - Performance Optimization 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. When to use this skill 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 Quick reference Critical priorities 1. Defer await until needed - Move awaits into branches where they're used 2. Use Promise.all() - Parallelize independent async operations 3. Avoid barrel imports - Import directly from source files 4. Dynamic imports - Lazy-load heavy components 5. Strategic Suspense - Stream content while showing layout Common patterns Parallel data fetching: Direct imports: Dynamic components: Using the guidelines The complete performance guidelines are available in the references folder: react-performance-guidelines.md: Complete guide with all 40+ rules, code examples, and impact analysis Each rule includes: Incorrect/correct code comparisons Specific impact metrics When to apply the optimization Real-world examples Categories overview 1. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/react-best-practices