Two files, one repository

Sections

• − React Best Practices
• − 1. Eliminating Waterfalls
• − 1.1 Defer Await Until Needed
• − 1.2 Dependency-Based Parallelization
• − 1.3 Prevent Waterfall Chains in API Routes
• − 1.4 Promise.all() for Independent Operations
• − 1.5 Strategic Suspense Boundaries
• − 2. Bundle Size Optimization
• − 2.1 Avoid Barrel File Imports
• − 2.2 Conditional Module Loading
• − 2.3 Defer Non-Critical Third-Party Libraries
• − 2.4 Dynamic Imports for Heavy Components
• − 2.5 Preload Based on User Intent
• − 3. Server-Side Performance
• − 3.1 Authenticate Server Actions Like API Routes
• − 3.2 Avoid Duplicate Serialization in RSC Props
• − 3.3 Cross-Request LRU Caching
• − 3.4 Minimize Serialization at RSC Boundaries
• − 3.5 Parallel Data Fetching with Component Composition
• − 3.6 Per-Request Deduplication with React.cache()
• − 3.7 Use after() for Non-Blocking Operations
• − 4. Client-Side Data Fetching
• − 4.1 Deduplicate Global Event Listeners
• − 4.2 Use Passive Event Listeners for Scrolling Performance
• − 4.3 Use SWR for Automatic Deduplication
• − 4.4 Version and Minimize localStorage Data
• − 5. Re-render Optimization
• − 5.1 Calculate Derived State During Rendering
• − 5.2 Defer State Reads to Usage Point
• − 5.3 Do not wrap a simple expression with a primitive result type in useMemo
• − 5.4 Extract Default Non-primitive Parameter Value from Memoized Component to Constant
• − 5.5 Extract to Memoized Components
• − 5.6 Narrow Effect Dependencies
• − 5.7 Put Interaction Logic in Event Handlers
• − 5.8 Subscribe to Derived State
• − 5.9 Use Functional setState Updates
• − 5.10 Use Lazy State Initialization
• − 5.11 Use Transitions for Non-Urgent Updates
• − 5.12 Use useRef for Transient Values
• − 6. Rendering Performance
• − 6.1 Animate SVG Wrapper Instead of SVG Element
• − 6.2 CSS content-visibility for Long Lists
• − 6.3 Hoist Static JSX Elements
• − 6.4 Optimize SVG Precision
• − 6.5 Prevent Hydration Mismatch Without Flickering
• − 6.6 Suppress Expected Hydration Mismatches
• − 6.7 Use Activity Component for Show/Hide
• − 6.8 Use Explicit Conditional Rendering
• − 6.9 Use useTransition Over Manual Loading States
• − 7. JavaScript Performance
• − 7.1 Avoid Layout Thrashing
• − 7.2 Build Index Maps for Repeated Lookups
• − 7.3 Cache Property Access in Loops
• − 7.4 Cache Repeated Function Calls
• − 7.5 Cache Storage API Calls
• − 7.6 Combine Multiple Array Iterations
• − 7.7 Early Length Check for Array Comparisons
• − 7.8 Early Return from Functions
• + React Composition Patterns
• + 1. Component Architecture
• + 1.1 Avoid Boolean Prop Proliferation
• + 1.2 Use Compound Components
• + 2. State Management
• + 2.1 Decouple State Management from UI
• + 2.2 Define Generic Context Interfaces for Dependency Injection
• + 2.3 Lift State into Provider Components
• + 3. Implementation Patterns
• + 3.1 Create Explicit Component Variants
• + 3.2 Prefer Composing Children Over Render Props
• + 4. React 19 APIs
• + 4.1 React 19 API Changes
• + References
•   Abstract
•   Table of Contents

Commands

• − node.style.transform = `translateX(${e.clientX}px)`
• − npx svgo --precision=1 --multipass icon.svg

Section tags

• − build
• − lint-format
• − architecture
• − types
• − security
• − dependencies
• − performance
• − deployment
•   code-style
•   api
•   ui
•   do-not