@ivannxbt/ai-config 0.1.0

package/.gemini/antigravity/skills/react-native-best-practices/references/js-memory-leaks.md

@@ -0,0 +1,205 @@
+---
+title: Hunt JS Memory Leaks
+impact: MEDIUM
+tags: memory, leaks, profiling, cleanup
+---
+
+# Skill: Hunt JS Memory Leaks
+
+Find and fix JavaScript memory leaks using React Native DevTools memory profiling.
+
+## Quick Pattern
+
+**Incorrect (listener not cleaned up):**
+
+```jsx
+useEffect(() => {
+  const sub = EventEmitter.addListener('event', handler);
+  // Missing cleanup!
+}, []);
+```
+
+**Correct (proper cleanup):**
+
+```jsx
+useEffect(() => {
+  const sub = EventEmitter.addListener('event', handler);
+  return () => sub.remove();
+}, []);
+```
+
+## When to Use
+
+- App memory usage grows over time
+- App crashes after extended use
+- Navigating between screens increases memory
+- Suspecting event listeners or timers not cleaned up
+
+## Prerequisites
+
+- React Native DevTools accessible
+- App running in development mode
+
+## Step-by-Step Instructions
+
+### 1. Open Memory Profiler
+
+1. Launch React Native DevTools (press `j` in Metro)
+2. Go to **Memory** tab
+3. Select **"Allocation instrumentation on timeline"**
+
+### 2. Record Memory Allocations
+
+1. Click **"Start"** at the bottom
+2. Perform actions that might leak (navigate, trigger events, etc.)
+3. Wait 10-30 seconds
+4. Click **"Stop"**
+
+### 3. Analyze the Timeline
+
+**Key indicators:**
+- **Blue bars** = Memory allocated
+- **Gray bars** = Memory freed (garbage collected)
+- **Blue bars that stay blue** = Potential leak!
+
+### 4. Investigate Leaking Objects
+
+![Memory Heap Snapshot](images/memory-heap-snapshot.png)
+
+The Memory tab shows:
+- **Timeline** (top): Blue bars = allocations, select time range to filter
+- **Summary view** (bottom): Lists constructors with allocation counts
+
+**Key columns:**
+- **Constructor**: Object type (e.g., `JSObject`, `Function`, `(string)`)
+- **Count**: Number of instances (×85000 = 85,000 objects)
+- **Shallow Size**: Memory of the object itself
+- **Retained Size**: Memory freed if object is deleted (including references)
+
+**Red flag**: Large retained size % with small shallow size % = closures or references holding large objects.
+
+**To investigate:**
+1. Click on a blue spike in the timeline
+2. Look at the Constructor list below
+3. Check **Shallow size** vs **Retained size**
+4. Expand constructors to see individual allocations
+5. Click to see the exact source location
+
+### 5. Verify the Fix
+
+After fixing, re-profile. All bars should turn gray (except the most recent).
+
+## Code Examples
+
+### Common Leak Patterns
+
+**1. Listeners Not Cleaned Up:**
+
+```jsx
+// BAD: Memory leak
+const BadEventComponent = () => {
+  useEffect(() => {
+    const subscription = EventEmitter.addListener('myEvent', handleEvent);
+    // Missing cleanup!
+  }, []);
+  
+  return <Text>Listening...</Text>;
+};
+
+// GOOD: Proper cleanup
+const GoodEventComponent = () => {
+  useEffect(() => {
+    const subscription = EventEmitter.addListener('myEvent', handleEvent);
+    return () => subscription.remove(); // Cleanup!
+  }, []);
+  
+  return <Text>Listening...</Text>;
+};
+```
+
+**2. Timers Not Cleared:**
+
+```jsx
+// BAD: Memory leak
+const BadTimerComponent = () => {
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCount(prev => prev + 1);
+    }, 1000);
+    // Missing cleanup!
+  }, []);
+};
+
+// GOOD: Proper cleanup
+const GoodTimerComponent = () => {
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCount(prev => prev + 1);
+    }, 1000);
+    return () => clearInterval(timer); // Cleanup!
+  }, []);
+};
+```
+
+**3. Closures Capturing Large Objects:**
+
+```jsx
+// BAD: Closure captures entire array
+class BadClosureExample {
+  private largeData = new Array(1000000).fill('data');
+  
+  createLeakyFunction() {
+    return () => this.largeData.length; // Captures this.largeData
+  }
+}
+
+// GOOD: Only capture what's needed
+class GoodClosureExample {
+  private largeData = new Array(1000000).fill('data');
+  
+  createEfficientFunction() {
+    const length = this.largeData.length; // Extract value
+    return () => length; // Only captures primitive
+  }
+}
+```
+
+**4. Global Arrays Growing:**
+
+```jsx
+// BAD: Global array never cleared
+let leakyClosures = [];
+
+const createLeak = () => {
+  const data = generateLargeData();
+  leakyClosures.push(() => data); // Keeps growing!
+};
+
+// GOOD: Clear when done or use WeakRef
+const createNoLeak = () => {
+  const data = generateLargeData();
+  const closure = () => data;
+  // Use it and let it be garbage collected
+  return closure;
+};
+```
+
+## Memory Profiler Metrics
+
+| Metric | Meaning |
+|--------|---------|
+| **Shallow size** | Memory held by the object itself |
+| **Retained size** | Memory freed if object is deleted (includes references) |
+
+**Large retained size with small shallow size** = Object holding references to other large objects (common in closures).
+
+## Common Pitfalls
+
+- **Not forcing GC**: GC runs periodically. Allocate something else to trigger collection before concluding there's a leak.
+- **Ignoring gray bars**: Gray = properly collected. Only blue bars that persist are leaks.
+- **Missing useEffect cleanup**: Most common React Native leak source.
+
+## Related Skills
+
+- [native-memory-leaks.md](./native-memory-leaks.md) - Native-side memory leaks
+- [js-profile-react.md](./js-profile-react.md) - General profiling

package/.gemini/antigravity/skills/react-native-best-practices/references/js-profile-react.md

@@ -0,0 +1,161 @@
+---
+title: Profile React Performance
+impact: MEDIUM
+tags: profiling, devtools, re-renders, flamegraph
+---
+
+# Skill: Profile React Performance
+
+Identify unnecessary re-renders and performance bottlenecks in React Native apps using React Native DevTools.
+
+## Quick Command
+
+```bash
+# Open React Native DevTools (press 'j' in Metro terminal)
+# Or shake device → "Open DevTools"
+# Go to Profiler tab → Start profiling → Perform actions → Stop
+```
+
+## When to Use
+
+- App feels sluggish or janky during interactions
+- Need to identify which components re-render unnecessarily
+- Investigating slow list scrolling or form inputs
+- Before applying memoization or state management changes
+
+## Prerequisites
+
+- React Native DevTools accessible (press `j` in Metro or use Dev Menu)
+- App running in development mode
+- React DevTools version 6.0.1+ for React Compiler support
+
+> **Note**: This skill involves interpreting visual profiler output (flame graphs, component highlighting). AI agents cannot yet process screenshots autonomously. Use this as a guide while reviewing the profiler UI manually, or await MCP-based visual feedback integration (see roadmap).
+
+## Step-by-Step Instructions
+
+### 1. Open React Native DevTools
+
+```bash
+# Option A: Press 'j' in Metro terminal (works with both RN CLI and Expo)
+# Option B: Shake device / Cmd+D (iOS) / Cmd+M (Android) → "Open DevTools"
+# Expo: Also accessible via Expo DevTools in browser
+```
+
+### 2. Configure Profiler Settings
+
+1. Go to **Profiler** tab
+2. Click gear icon (⚙️) for settings
+3. Enable:
+   - "Highlight updates when components render"
+   - "Record why each component rendered while profiling"
+
+### 3. Record a Profiling Session
+
+```
+1. Click "Start profiling" (blue circle) or "Reload and start profiling"
+2. Perform the interaction you want to analyze
+3. Click "Stop profiling"
+```
+
+**Use "Reload and start profiling"** for startup performance analysis.
+
+### 4. Analyze the Flame Graph
+
+![React DevTools Flamegraph](images/devtools-flamegraph.png)
+
+The flame graph shows component render hierarchy with timing:
+
+**Color indicators:**
+- **Yellow components**: Most time spent rendering (focus here)
+- **Green components**: Fast/memoized
+- **Gray components**: Did not render
+
+**Right panel shows "Why did this render?":**
+- Props changed (shows which prop, e.g., `children`, `onPress`)
+- Rendered at timestamps with duration (e.g., "3.7s for 0.9ms")
+
+**Click on a component to see:**
+- Why it rendered (hook change, props change, parent re-render)
+- Render duration
+- Child components affected
+
+### 5. Use Ranked View for Bottom-Up Analysis
+
+Click "Ranked" tab to see components sorted by render time (slowest first).
+
+### 6. Profile JavaScript CPU
+
+For non-React performance issues:
+
+1. Go to **JavaScript Profiler** tab (enable in settings if hidden)
+2. Click "Start" to record
+3. Perform actions
+4. Click "Stop"
+5. Use **Heavy (Bottom Up)** view to find slowest functions
+
+## Code Examples
+
+### Before: Unnecessary Re-renders
+
+```jsx
+const App = () => {
+  const [count, setCount] = useState(0);
+  
+  return (
+    <View>
+      <Text>{count}</Text>
+      {/* Button re-renders on every count change */}
+      <Button onPress={() => setCount(count + 1)} title="Press" />
+    </View>
+  );
+};
+
+const Button = ({onPress, title}) => (
+  <Pressable onPress={onPress}>
+    <Text>{title}</Text>
+  </Pressable>
+);
+```
+
+### After: Memoized
+
+```jsx
+const App = () => {
+  const [count, setCount] = useState(0);
+  const onPressHandler = useCallback(() => setCount(c => c + 1), []);
+  
+  return (
+    <View>
+      <Text>{count}</Text>
+      <Button onPress={onPressHandler} title="Press" />
+    </View>
+  );
+};
+
+const Button = memo(({onPress, title}) => (
+  <Pressable onPress={onPress}>
+    <Text>{title}</Text>
+  </Pressable>
+));
+```
+
+## Interpreting Results
+
+| Symptom | Likely Cause | Solution |
+|---------|--------------|----------|
+| Many yellow components | Cascading re-renders | Add memoization or use React Compiler |
+| "Props changed" on callbacks | Inline functions recreated | Use `useCallback` |
+| "Parent component rendered" | State too high in tree | Move state down or use atomic state |
+| Long JS thread block | Heavy computation | Move to background or use `useDeferredValue` |
+
+## Common Pitfalls
+
+- **Profiling in dev mode**: Always disable JS Dev Mode for accurate measurements (Settings > JS Dev Mode on Android)
+- **Not using production builds**: Some issues only appear with minified code
+- **Ignoring "Why did this render?"**: This tells you exactly what to fix
+
+## Related Skills
+
+- [js-react-compiler.md](./js-react-compiler.md) - Automatic memoization
+- [js-atomic-state.md](./js-atomic-state.md) - Reduce re-renders with Jotai/Zustand
+- [js-measure-fps.md](./js-measure-fps.md) - Quantify frame rate impact