performance-optimizer

# Performance Optimizer

Optimize React Native app performance across rendering, bridge communication, and memory usage.

## Quick Start

Common performance issues and quick fixes:
- **Slow lists**: Use FlatList with proper optimization props
- **Bridge bottleneck**: Batch operations, use native modules
- **Memory leaks**: Clean up listeners, timers, subscriptions
- **Slow animations**: Use native driver, Reanimated library

## Instructions

### Step 1: Profile and Identify Bottlenecks

**Enable Performance Monitor:**
```javascript
// Shake device → "Show Perf Monitor"
// Or in code (dev only):
if (__DEV__) {
  require('react-native').PerformanceLogger.startTimespan('AppStartup');
}
```

**Use React DevTools Profiler:**
```bash
npm install -g react-devtools
react-devtools
```

**Use Flipper:**
- Install Flipper desktop app
- Enable React DevTools, Network, Hermes Debugger plugins
- Profile component renders and bridge calls

**Common bottlenecks:**
- Excessive re-renders
- Bridge communication overhead
- Large list rendering
- Memory leaks
- Unoptimized images

### Step 2: Optimize Component Rendering

**Use React.memo:**
```javascript
import React, { memo } from 'react';

const ExpensiveComponent = memo(({ data }) => {
  return <View>{/* Expensive rendering */}</View>;
});

// With custom comparison
const ExpensiveComponent = memo(
  ({ data }) => <View>{data.value}</View>,
  (prevProps, nextProps) => prevProps.data.id === nextProps.data.id
);
```

**Use useMemo and useCallback:**
```javascript
import { useMemo, useCallback } from 'react';

function MyComponent({ items, onPress }) {
  // Memoize expensive computations
  const sortedItems = useMemo(
    () => items.sort((a, b) => a.value - b.value),
    [items]
  );
  
  // Memoize callbacks to prevent child re-renders
  const handlePress = useCallback(
    (id) => onPress(id),
    [onPress]
  );
  
  return <List items={sortedItems} onPress={handlePress} />;
}
```

**Avoid inline functions and objects:**
```javascr