References

React Native Performance Guide

FlatList optimization, navigation performance, memory management

Core Patterns

  • When to Read This
  • FlatList Optimization
  • Image Optimization
  • Navigation Performance

When to Read This

  • Optimizing FlatList rendering
  • Improving navigation performance
  • Reducing memory usage
  • Debugging performance issues

FlatList Optimization

✅ Use getItemLayout

// ✅ CORRECT: Provide exact item dimensions
<FlatList
  data={items}
  renderItem={renderItem}
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
/>

// ❌ WRONG: Dynamic heights without getItemLayout
<FlatList data={items} renderItem={renderItem} />

✅ Use keyExtractor

// ✅ CORRECT: Unique key extractor
<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={renderItem}
/>

// ❌ WRONG: Index as key (causes re-renders)
<FlatList
  data={items}
  keyExtractor={(item, index) => index.toString()}
  renderItem={renderItem}
/>

✅ Optimize renderItem

// ✅ CORRECT: Memoized component
const MemoizedItem = React.memo(({ item }) => (
  <View>
    <Text>{item.title}</Text>
  </View>
));

<FlatList
  data={items}
  renderItem={({ item }) => <MemoizedItem item={item} />}
/>

✅ Window Size Configuration

<FlatList
  data={items}
  renderItem={renderItem}
  initialNumToRender={10} // Initial render count
  maxToRenderPerBatch={5} // Batch render size
  windowSize={5} // Pages kept in memory
  removeClippedSubviews={true} // Unmount off-screen views (Android)
/>

Image Optimization

✅ Use resizeMode

<Image
  source={{ uri: imageUrl }}
  style={{ width: 200, height: 200 }}
  resizeMode="cover"
/>

✅ Use Fast Image Library

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

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

✅ Lazy Load Screens

import { lazy } from 'react';

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

<Stack.Screen name="Details" component={DetailsScreen} />

✅ Prevent Unnecessary Re-renders

// ✅ CORRECT: Memoize navigation options
const screenOptions = useMemo(
  () => ({
    headerTitle: 'Details',
  }),
  []
);

<Stack.Screen name="Details" options={screenOptions} />

Memory Management

✅ Clean Up Listeners

useEffect(() => {
  const subscription = EventEmitter.addListener("event", handleEvent);

  return () => {
    subscription.remove(); // ✅ Clean up
  };
}, []);

✅ Cancel Network Requests

useEffect(() => {
  const controller = new AbortController();

  fetch(url, { signal: controller.signal })
    .then(handleResponse)
    .catch(handleError);

  return () => {
    controller.abort(); // ✅ Cancel on unmount
  };
}, []);

Profiling

✅ Use Performance Monitor

import { PerformanceObserver } from "react-native";

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

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

References