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:

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

Use React DevTools Profiler:

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:

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:

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:

// Bad - creates new function on every render
<Button onPress={() => handlePress(item.id)} />

// Good - use useCallback
const handleItemPress = useCallback(() => handlePress(item.id), [item.id]);
<Button onPress={handleItemPress} />

// Bad - creates new object on every render
<View style={{ marginTop: 10 }} />

// Good - define outside or use StyleSheet
const styles = StyleSheet.create({
  container: { marginTop: 10 }
});
<View style={styles.container} />

Step 3: Optimize List Rendering

Use FlatList with optimization props:

import { FlatList } from 'react-native';

<FlatList
  data={items}
  renderItem={({ item }) => <Item data={item} />}
  keyExtractor={(item) => item.id}
  
  // Performance optimizations
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  updateCellsBatchingPeriod={50}
  initialNumToRender={10}
  windowSize={5}
  
  // If item height is fixed
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
/>

Use FlashList for better performance:

npm install @shopify/flash-list

import { FlashList } from '@shopify/flash-list';

<FlashList
  data={items}
  renderItem={({ item }) => <Item data={item} />}
  estimatedItemSize={100}
/>

Optimize list items:

// Memoize list items
const Item = memo(({ data }) => {
  return (
    <View>
      <Text>{data.title}</Text>
    </View>
  );
});

// Use PureComponent for class components
class Item extends PureComponent {
  render() {
    return <View>{this.props.data.title}</View>;
  }
}

Step 4: Optimize Bridge Communication

Batch bridge calls:

// Bad - multiple bridge calls
items.forEach(item => {
  NativeModule.processItem(item);
});

// Good - single bridge call
NativeModule.processItems(items);

Use InteractionManager:

import { InteractionManager } from 'react-native';

// Defer expensive operations until after animations
InteractionManager.runAfterInteractions(() => {
  // Expensive operation
  processData();
});

Move heavy operations to native:

// For CPU-intensive tasks, create native module
import { NativeModules } from 'react-native';
const { HeavyComputation } = NativeModules;

const result = await HeavyComputation.process(largeDataset);

Step 5: Optimize Images

Use FastImage:

npm install react-native-fast-image

import FastImage from 'react-native-fast-image';

<FastImage
  source={{
    uri: imageUrl,
    priority: FastImage.priority.normal,
    cache: FastImage.cacheControl.immutable,
  }}
  resizeMode={FastImage.resizeMode.cover}
  style={{ width: 200, height: 200 }}
/>

Optimize image sizes:

// Use appropriate image sizes
<Image
  source={{ uri: imageUrl }}
  style={{ width: 100, height: 100 }}
  resizeMode="cover"
/>

// Preload images
FastImage.preload([
  { uri: image1Url },
  { uri: image2Url },
]);

Use WebP format:

• Smaller file size than PNG/JPEG
• Supported on both iOS and Android
• Convert images: cwebp input.png -o output.webp

Step 6: Optimize Animations

Use native driver:

import { Animated } from 'react-native';

const fadeAnim = new Animated.Value(0);

Animated.timing(fadeAnim, {
  toValue: 1,
  duration: 1000,
  useNativeDriver: true,  // Enable native driver
}).start();

Use Reanimated for complex animations:

npm install react-native-reanimated

import Animated, {
  useAnimatedStyle,
  withTiming,
  useSharedValue,
} from 'react-native-reanimated';

function AnimatedComponent() {
  const offset = useSharedValue(0);
  
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: withTiming(offset.value) }],
  }));
  
  return <Animated.View style={animatedStyle} />;
}

Step 7: Fix Memory Leaks

Clean up listeners:

useEffect(() => {
  const subscription = eventEmitter.addListener('event', handler);
  
  return () => {
    subscription.remove();  // Cleanup
  };
}, []);

Clean up timers:

useEffect(() => {
  const timer = setTimeout(() => {
    // Do something
  }, 1000);
  
  return () => {
    clearTimeout(timer);  // Cleanup
  };
}, []);

Clean up async operations:

useEffect(() => {
  let cancelled = false;
  
  async function fetchData() {
    const result = await api.fetch();
    if (!cancelled) {
      setData(result);
    }
  }
  
  fetchData();
  
  return () => {
    cancelled = true;  // Prevent state update after unmount
  };
}, []);

Common Patterns

Virtualized Lists

import { VirtualizedList } from 'react-native';

<VirtualizedList
  data={items}
  renderItem={({ item }) => <Item data={item} />}
  keyExtractor={(item) => item.id}
  getItemCount={(data) => data.length}
  getItem={(data, index) => data[index]}
/>

Lazy Loading

import React, { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />
    </Suspense>
  );
}

Debouncing and Throttling

import { useCallback } from 'react';
import debounce from 'lodash/debounce';

function SearchComponent() {
  const debouncedSearch = useCallback(
    debounce((query) => {
      performSearch(query);
    }, 300),
    []
  );
  
  return (
    <TextInput
      onChangeText={debouncedSearch}
      placeholder="Search..."
    />
  );
}

Pagination

function InfiniteList() {
  const [page, setPage] = useState(1);
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);
  
  const loadMore = async () => {
    if (loading) return;
    
    setLoading(true);
    const newItems = await fetchItems(page);
    setItems([...items, ...newItems]);
    setPage(page + 1);
    setLoading(false);
  };
  
  return (
    <FlatList
      data={items}
      renderItem={({ item }) => <Item data={item} />}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={loading ? <Loading /> : null}
    />
  );
}

Profiling Tools

React DevTools Profiler

// Wrap components to profile
import { Profiler } from 'react';

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime
) {
  console.log(`${id} took ${actualDuration}ms to render`);
}

<Profiler id="MyComponent" onRender={onRenderCallback}>
  <MyComponent />
</Profiler>

Performance Monitoring

import { PerformanceObserver, performance } from 'react-native-performance';

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(`${entry.name}: ${entry.duration}ms`);
  });
});

observer.observe({ entryTypes: ['measure'] });

performance.mark('start');
// ... operation
performance.mark('end');
performance.measure('operation', 'start', 'end');

Troubleshooting

App feels sluggish:

• Profile with React DevTools
• Check for excessive re-renders
• Optimize list rendering
• Use native driver for animations

High memory usage:

• Check for memory leaks (listeners, timers)
• Optimize image sizes
• Implement pagination for large lists
• Profile with Xcode Instruments (iOS) or Android Profiler

Slow startup:

• Reduce initial bundle size
• Lazy load components
• Optimize native module initialization
• Use Hermes engine

Janky animations:

• Use native driver
• Avoid bridge calls during animations
• Use Reanimated for complex animations
• Reduce layout complexity

Best Practices

1. Profile first: Identify actual bottlenecks before optimizing
2. Memoize appropriately: Don't over-optimize, profile to confirm
3. Optimize lists: Use FlatList/FlashList with proper props
4. Native driver: Always use for animations when possible
5. Clean up: Remove listeners, timers, subscriptions
6. Batch operations: Minimize bridge calls
7. Lazy load: Load components and data on-demand
8. Monitor: Track performance metrics in production