# React Optimise

> React Optimise Best Practices

- Skill: `comeonoliver/react-optimise` (Agent Skill)
- Install (CLI): `npx skillmds@latest add comeonoliver/react-optimise`
- Raw SKILL.md: https://api.skillmd.com/api/skills/comeonoliver/react-optimise/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ComeOnOliver (https://skillmd.com/u/comeonoliver)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/comeonoliver/react-optimise

---

# 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](references/_sections.md#1-react-compiler-mastery) — **CRITICAL**
   - 1.1 [Detect and Fix Silent Compiler Bailouts](references/compiler-silent-bailouts.md) — CRITICAL (prevents losing automatic memoization)
   - 1.2 [Isolate Side Effects from Render for Compiler Correctness](references/compiler-side-effect-rules.md) — CRITICAL (prevents compiler from producing incorrect cached output)
   - 1.3 [Remove Manual Memoization After Compiler Adoption](references/compiler-remove-manual-memo.md) — CRITICAL (20-40% code reduction in component files)
   - 1.4 [Use Incremental Compiler Adoption with Directives](references/compiler-incremental-adoption.md) — CRITICAL (enables safe rollout without full codebase migration)
   - 1.5 [Use Ref Access Patterns That Enable Compilation](references/compiler-ref-access-patterns.md) — CRITICAL (maintains compiler optimization for ref-using components)
   - 1.6 [Write Compiler-Friendly Component Patterns](references/compiler-friendly-code.md) — CRITICAL (2-10x automatic render optimization)
2. [Bundle & Loading](references/_sections.md#2-bundle--loading) — **CRITICAL**
   - 2.1 [Configure Dependencies for Effective Tree Shaking](references/bundle-tree-shake-deps.md) — CRITICAL (50-90% dead code elimination in dependencies)
   - 2.2 [Eliminate Barrel Files to Enable Tree Shaking](references/bundle-barrel-elimination.md) — CRITICAL (200-800ms import cost eliminated)
   - 2.3 [Enforce Bundle Size Budgets with Analysis Tools](references/bundle-analyze-budgets.md) — CRITICAL (prevents gradual bundle size regression)
   - 2.4 [Prefetch Likely Next Routes on Interaction](references/bundle-prefetch-routes.md) — CRITICAL (200-1000ms faster perceived navigation)
   - 2.5 [Split Code at Route Boundaries with React.lazy](references/bundle-route-splitting.md) — CRITICAL (40-70% reduction in initial bundle size)
   - 2.6 [Use Dynamic Imports for Heavy Libraries](references/bundle-dynamic-imports.md) — CRITICAL (100-500KB removed from critical path)
3. [Rendering Optimization](references/_sections.md#3-rendering-optimization) — **HIGH**
   - 3.1 [Avoid Inline Object Creation in JSX Props](references/render-avoid-inline-objects.md) — HIGH (prevents unnecessary child re-renders)
   - 3.2 [Debounce Expensive Derived Computations](references/render-debounce-expensive.md) — HIGH (50-200ms saved per keystroke)
   - 3.3 [Use CSS Containment to Isolate Layout Recalculation](references/render-css-containment.md) — HIGH (60-90% layout recalc reduction)
   - 3.4 [Use Children Pattern to Prevent Parent Re-Renders](references/render-children-pattern.md) — HIGH (eliminates re-renders of static subtrees)
   - 3.5 [Use Stable Keys for List Rendering Performance](references/render-key-stability.md) — HIGH (O(n) DOM mutations to O(1) moves)
   - 3.6 [Virtualize Long Lists with TanStack Virtual](references/render-virtualize-lists.md) — HIGH (O(n) to O(1) DOM nodes)
4. [Data Fetching Performance](references/_sections.md#4-data-fetching-performance) — **HIGH**
   - 4.1 [Abort Stale Requests on Navigation or Re-fetch](references/fetch-abort-stale.md) — HIGH (prevents stale data display)
   - 4.2 [Deduplicate Identical In-Flight Requests](references/fetch-request-deduplication.md) — HIGH (50-80% fewer network requests)
   - 4.3 [Eliminate Sequential Data Fetch Waterfalls](references/fetch-eliminate-waterfalls.md) — HIGH (2-5x faster page loads)
   - 4.4 [Preload Data at Route Level Before Component Mounts](references/fetch-route-preloading.md) — HIGH (200-1000ms eliminated)
   - 4.5 [Use Stale-While-Revalidate for Cache Freshness](references/fetch-stale-while-revalidate.md) — HIGH (0ms perceived load for returning visitors)
5. [Core Web Vitals](references/_sections.md#5-core-web-vitals) — **MEDIUM-HIGH**
   - 5.1 [Instrument Real User Monitoring with web-vitals](references/cwv-instrumentation.md) — MEDIUM-HIGH (enables data-driven optimization)
   - 5.2 [Optimize Images with Responsive Sizing and Lazy Loading](references/cwv-image-optimization.md) — MEDIUM-HIGH (40-70% bandwidth reduction)
   - 5.3 [Optimize Interaction to Next Paint with Yielding](references/cwv-inp-optimization.md) — MEDIUM-HIGH (INP from 500ms+ to under 200ms)
   - 5.4 [Optimize Largest Contentful Paint with Priority Loading](references/cwv-lcp-optimization.md) — MEDIUM-HIGH (200-1000ms LCP improvement)
   - 5.5 [Prevent Cumulative Layout Shift with Size Reservations](references/cwv-cls-prevention.md) — MEDIUM-HIGH (CLS from 0.25+ to under 0.1)
6. [State & Subscription Performance](references/_sections.md#6-state--subscription-performance) — **MEDIUM-HIGH**
   - 6.1 [Derive State Instead of Syncing for Zero Extra Renders](references/sub-derived-state-perf.md) — MEDIUM-HIGH (eliminates double-render cycle)
   - 6.2 [Separate Server State from Client State Management](references/sub-server-client-separation.md) — MEDIUM-HIGH (reduces state management code by 40%)
   - 6.3 [Split Contexts to Isolate High-Frequency Updates](references/sub-context-splitting.md) — MEDIUM-HIGH (5-50x fewer re-renders)
   - 6.4 [Use Atomic State for Independent Reactive Values](references/sub-atomic-state.md) — MEDIUM-HIGH (3-10x fewer unnecessary re-renders)
   - 6.5 [Use Selector-Based Subscriptions for Granular Updates](references/sub-selector-subscriptions.md) — MEDIUM-HIGH (reduces re-renders to only affected components)
7. [Profiling & Measurement](references/_sections.md#7-profiling--measurement) — **MEDIUM**
   - 7.1 [Benchmark with Production Builds Only](references/profile-production-builds.md) — MEDIUM (prevents false positives from dev-mode overhead)
   - 7.2 [Enforce Performance Budgets in CI](references/profile-performance-budgets.md) — MEDIUM (catches 90% of perf issues before merge)
   - 7.3 [Profile Before Optimizing to Target Real Bottlenecks](references/profile-before-optimize.md) — MEDIUM (10x more effective optimization effort)
   - 7.4 [Read Flame Charts to Identify Hot Render Paths](references/profile-flame-charts.md) — MEDIUM (identifies exact function causing 80% of render time)
   - 7.5 [Use React Performance Tracks for Render Analysis](references/profile-react-devtools.md) — MEDIUM (pinpoints render bottlenecks in minutes)
8. [Memory Management](references/_sections.md#8-memory-management) — **LOW-MEDIUM**
   - 8.1 [Avoid Closure-Based Memory Leaks in Event Handlers](references/mem-closure-leaks.md) — LOW-MEDIUM (prevents MB-scale memory retention)
   - 8.2 [Cancel Async Operations on Unmount](references/mem-async-cancellation.md) — LOW-MEDIUM (prevents stale updates and memory retention)
   - 8.3 [Clean Up Effects to Prevent Subscription Memory Leaks](references/mem-effect-cleanup.md) — LOW-MEDIUM (prevents linear memory growth)
   - 8.4 [Dispose Heavy Resources in Cleanup Functions](references/mem-heavy-resources.md) — LOW-MEDIUM (prevents 5-50MB per resource retention)
   - 8.5 [Use Heap Snapshots to Detect Component Retention](references/mem-heap-snapshots.md) — LOW-MEDIUM (identifies 10-100MB memory growth)

## References

1. [https://react.dev](https://react.dev)
2. [https://react.dev/blog/2025/10/07/react-compiler-1](https://react.dev/blog/2025/10/07/react-compiler-1)
3. [https://web.dev/articles/vitals](https://web.dev/articles/vitals)
4. [https://tanstack.com/virtual](https://tanstack.com/virtual)
5. [https://developer.chrome.com/docs/devtools/performance](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