Summary

This PR implements Memory Profiling with Automatic Leak Detection for React DevTools, addressing issue #36722.

Motivation

Currently, React DevTools lacks built-in memory profiling capabilities, making it difficult for developers to identify and debug memory leaks in their React applications. Developers must rely on external tools like Chrome DevTools' heap snapshots, which don't provide React-specific insights about component lifecycle issues, detached DOM nodes, or common React patterns that cause leaks.

This feature adds:

• Real-time memory monitoring using the Performance Memory API
• Automatic leak detection with 6 pattern recognition algorithms
• Actionable optimization suggestions with code examples
• Visual memory trends with SVG charts
• Component-level insights for React-specific memory issues

Implementation Details

Backend (packages/react-devtools-shared/src/backend/):

• memoryProfiler.js (463 lines) - Core profiling engine with Performance API integration, snapshot capture, trend analysis, and growth detection
• memoryLeakDetector.js (461 lines) - Pattern recognition for detached DOM nodes, event listeners, component lifecycle issues, timers, subscriptions, and memory growth
• profilingHooks.js - Extended with memory profiling lifecycle hooks
• types.js - Added 7 new Flow types: MemoryProfilingData, MemorySnapshot, MemoryTrend, LeakDetectionResult, LeakPattern, etc.
• bridge.js - Added 4 backend + 4 frontend events for memory profiling communication

Data Layer (packages/react-devtools-shared/src/devtools/):

• ProfilerStore.js - Extended with memory state management and event listeners
• MemoryProfilingCache.js (328 lines) - Cached derived data for UI (chart data, statistics, sorted leaks, growth rates)

Frontend UI (packages/react-devtools-shared/src/devtools/views/Profiler/):

• MemoryProfiler.js (152 lines) - Main container with NoData/Recording/HasData states
• MemoryDashboard.js (311 lines) - 8-metric stats grid + SVG line chart for memory trends
• MemoryLeakWarnings.js (215 lines) - Leak cards with severity filtering, expandable details, suggestions
• MemoryOptimizationSuggestions.js (176 lines) - Dynamically generated fix recommendations with code examples
• Profiler.js - Integrated "Memory" tab alongside Flamegraph/Ranked/Timeline tabs
• CSS modules for all components with responsive design

Tests (packages/react-devtools-shared/src/tests/):

• memoryProfiler-test.js (389 lines) - 15+ test suites covering snapshot capture, monitoring, trend analysis, cleanup
• memoryLeakDetector-test.js (421 lines) - 20+ test scenarios for all 6 leak detection algorithms

Key Features

1. Performance API Integration - Uses performance.memory for accurate heap size tracking with graceful degradation when unavailable
2. Linear Regression Analysis - Calculates memory growth rate (MB/s) accounting for GC spikes
3. Circular Buffer - Limits to 300 snapshots to prevent profiler itself from leaking memory
4. Severity Classification - Critical/High/Medium/Low based on confidence scoring and impact
5. Component Tracking - Monitors mount/unmount lifecycle for React-specific leak patterns
6. Monkey-Patching - Tracks event listeners and detached DOM nodes non-invasively

How did you test this change?

Static Analysis ✅

$ yarn prettier
✓ Code formatting passed

$ yarn linc
✓ Lint passed for changed files

$ yarn flow dom-node
✓ No Flow type errors