Two files, one repository

Sections

• − React View Transitions
• − When to Animate
• − Choosing Animation Style
• − Availability
• − Core Concepts
• − The `<ViewTransition>` Component
• − Animation Triggers
• − Critical Placement Rule
• − Styling with View Transition Classes
• − CSS Pseudo-Elements
• − Transition Types
• − `router.back()` and Browser Back Button
• − Types and Suspense
• − Shared Element Transitions
• − Common Patterns
• − Enter/Exit
• − List Reorder
• − Composing Shared Elements with List Identity
• − Force Re-Enter with `key`
• − Suspense Fallback to Content
• − How Multiple VTs Interact
• − Use `default="none"` Liberally
• − Two Patterns Coexist
• − Nested VT Limitation
• − Next.js Integration
• − Accessibility
• − Implementation Workflow
• − Step 1: Audit the App
• − Step 2: Add CSS Recipes
• − Step 3: Isolate Persistent Elements
• − Step 4: Add Directional Page Transitions
• − Step 5: Add Suspense Reveals
• − Step 6: Add Shared Element Transitions
• − Step 7: Verify Each Navigation Path
• − Common Mistakes
• − Patterns and Guidelines
• − Searchable Grid with `useDeferredValue`
• − Card Expand/Collapse with `startTransition`
• − Cross-Fade Without Remount
• − Isolate Elements from Parent Animations
• − Shared Controls Between Skeleton and Content
• − Reusable Animated Collapse
• − Preserve State with Activity
• − Exclude Elements with `useOptimistic`
• − View Transition Events
• − Animation Timing
• − Troubleshooting
• − CSS Animation Recipes
• − Timing Variables
• − Shared Keyframes
• − Fade
• − Slide (Vertical)
• − Directional Navigation
• − Single-Class Approach
• − Separate Enter/Exit Classes
• − Shared Element Morph
• − Text Morph
• − Scale
• + React Best Practices
• + 1. Eliminating Waterfalls
• + 1.1 Check Cheap Conditions Before Async Flags
• + 1.2 Defer Await Until Needed
• + 1.3 Dependency-Based Parallelization
• + 1.4 Prevent Waterfall Chains in API Routes
• + 1.5 Promise.all() for Independent Operations
• + 1.6 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 Prefer Statically Analyzable Paths
• + 2.6 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 Avoid Shared Module State for Request Data
• + 3.4 Cross-Request LRU Caching
• + 3.5 Hoist Static I/O to Module Level
• + 3.6 Minimize Serialization at RSC Boundaries
• + 3.7 Parallel Data Fetching with Component Composition
• + 3.8 Parallel Nested Data Fetching
• + 3.9 Per-Request Deduplication with React.cache()
• + 3.10 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 Don't Define Components Inside Components
• + 5.5 Extract Default Non-primitive Parameter Value from Memoized Component to Constant
• + 5.6 Extract to Memoized Components
• + 5.7 Narrow Effect Dependencies
• + 5.8 Put Interaction Logic in Event Handlers
• + 5.9 Split Combined Hook Computations
• + 5.10 Subscribe to Derived State
• + 5.11 Use Functional setState Updates
• + 5.12 Use Lazy State Initialization
• + 5.13 Use Transitions for Non-Urgent Updates
• + 5.14 Use useDeferredValue for Expensive Derived Renders
• + 5.15 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 defer or async on Script Tags
• + 6.9 Use Explicit Conditional Rendering
• + 6.10 Use React DOM Resource Hints
•   Abstract
•   Table of Contents

Commands

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

Section tags

• − agent-behaviour
• + build
• + security
• + dependencies
• + api
• + performance
• + deployment
•   code-style
•   types
•   ui
•   do-not