react-optimise

name

react-optimise

description

Application-level React performance optimization covering React Compiler mastery, bundle optimization, rendering performance, data fetching, Core Web Vitals, state subscriptions, profiling, and memory management. Use when optimizing React app performance, analyzing bundle size, improving Core Web Vitals, or profiling render bottlenecks. Complements the react skill (API-level patterns) with holistic performance strategies. Does NOT cover React 19 API usage (see react skill) or Next.js-specific features (see nextjs-16-app-router skill).

React Optimise Best Practices

Application-level performance optimization guide for React applications. Contains 43 rules across 8 categories, prioritized by impact from critical (React Compiler, bundle optimization) to incremental (memory management).

When to Apply

• Optimizing React application performance or bundle size
• Adopting or troubleshooting React Compiler v1.0
• Splitting bundles and configuring code splitting
• Improving Core Web Vitals (INP, LCP, CLS)
• Profiling render performance and identifying bottlenecks
• Fixing memory leaks in long-lived single-page applications
• Optimizing data fetching patterns and eliminating waterfalls

Rule Categories

Category	Impact	Rules	Key Topics
React Compiler Mastery	CRITICAL	6	Compiler-friendly code, bailout detection, incremental adoption
Bundle & Loading	CRITICAL	6	Route splitting, barrel elimination, dynamic imports, prefetching
Rendering Optimization	HIGH	6	Virtualization, children pattern, debouncing, CSS containment
Data Fetching Performance	HIGH	5	Waterfall elimination, route preloading, SWR, deduplication
Core Web Vitals	MEDIUM-HIGH	5	INP yielding, LCP priority, CLS prevention, image optimization
State & Subscription Performance	MEDIUM-HIGH	5	Context splitting, selectors, atomic state, derived state
Profiling & Measurement	MEDIUM	5	DevTools profiling, flame charts, CI budgets, production builds
Memory Management	LOW-MEDIUM	5	Effect cleanup, async cancellation, closure leaks, heap analysis

Quick Reference

Critical patterns — get these right first:

• Write compiler-friendly components to unlock automatic 2-10x optimization
• Split code at route boundaries to reduce initial bundle by 40-70%
• Eliminate barrel files to enable tree shaking
• Detect and fix silent compiler bailouts

Common mistakes — avoid these anti-patterns:

• Reading refs during render (breaks compiler optimization)
• Importing entire libraries when only using one function
• Not profiling before optimizing (targeting the wrong bottleneck)
• Missing effect cleanup (subscription memory leaks)

Table of Contents

1. React Compiler Mastery — CRITICAL
   • 1.1 Detect and Fix Silent Compiler Bailouts — CRITICAL (prevents losing automatic memoization)
   • 1.2 Isolate Side Effects from Render for Compiler Correctness — CRITICAL (prevents compiler from producing incorrect cached output)
   • 1.3 Remove Manual Memoization After Compiler Adoption — CRITICAL (20-40% code reduction in component files)
   • 1.4 Use Incremental Compiler Adoption with Directives — CRITICAL (enables safe rollout without full codebase migration)
   • 1.5 Use Ref Access Patterns That Enable Compilation — CRITICAL (maintains compiler optimization for ref-using components)
   • 1.6 Write Compiler-Friendly Component Patterns — CRITICAL (2-10x automatic render optimization)
2. Bundle & Loading — CRITICAL
   • 2.1 Configure Dependencies for Effective Tree Shaking — CRITICAL (50-90% dead code elimination in dependencies)
   • 2.2 Eliminate Barrel Files to Enable Tree Shaking — CRITICAL (200-800ms import cost eliminated)
   • 2.3 Enforce Bundle Size Budgets with Analysis Tools — CRITICAL (prevents gradual bundle size regression)
   • 2.4 Prefetch Likely Next Routes on Interaction — CRITICAL (200-1000ms faster perceived navigation)
   • 2.5 Split Code at Route Boundaries with React.lazy — CRITICAL (40-70% reduction in initial bundle size)
   • 2.6 Use Dynamic Imports for Heavy Libraries — CRITICAL (100-500KB removed from critical path)
3. Rendering Optimization — HIGH
   • 3.1 Avoid Inline Object Creation in JSX Props — HIGH (prevents unnecessary child re-renders)
   • 3.2 Debounce Expensive Derived Computations — HIGH (50-200ms saved per keystroke)
   • 3.3 Use CSS Containment to Isolate Layout Recalculation — HIGH (60-90% layout recalc reduction)

References

1. https://react.dev
2. https://react.dev/blog/2025/10/07/react-compiler-1
3. https://web.dev/articles/vitals
4. https://tanstack.com/virtual
5. https://developer.chrome.com/docs/devtools/performance

Related Skills

• For React 19 API best practices, see react skill
• For Next.js App Router optimization, see nextjs-16-app-router skill
• For client-side form handling, see react-hook-form skill