React Native Performance Optimization: Ultimate Guide

npm install --save-dev react-devtools

import { Performance } from 'react-native';

// Enable in dev menu
// Shows FPS, RAM, and JS execution time

// Bad - ScrollView with many items
<ScrollView>
  {items.map(item => (
    <Item key={item.id} data={item} />
  ))}
</ScrollView>

// Good - FlatList with virtualization
<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <Item data={item} />}
/>

<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={keyExtractor}
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
/>

<FlatList
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  windowSize={5}
/>

const ExpensiveComponent = React.memo(({ data }) => {
  return <Text>{data.value}</Text>;
});

function List({ items }) {
  const sortedItems = useMemo(() => {
    return items.sort((a, b) => a.id - b.id);
  }, [items]);

  return <FlatList data={sortedItems} />;
}

const handlePress = useCallback(() => {
  console.log('Pressed');
}, []);

<TouchableOpacity onPress={handlePress}>
  <Text>Press</Text>
</TouchableOpacity>

<Image
  source={{ uri: 'https://example.com/image.png' }}
  style={{ width: 100, height: 100 }}
  resizeMode="cover"
/>

<Image
  source={{
    uri: 'https://example.com/image.png',
    cache: 'force-cache',
  }}
/>

npm install react-native-fast-image

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

<FastImage
  style={{ width: 200, height: 200 }}
  source={{
    uri: 'https://example.com/image.png',
    priority: FastImage.priority.high,
  }}
  resizeMode={FastImage.resizeMode.contain}
/>

import { lazy } from 'react';

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

// Bad
import { Button, Text, View } from 'react-native';

// Good - import only what's needed
import { View } from 'react-native';

// Bad - Multiple requests
fetch('/api/user/1');
fetch('/api/user/2');
fetch('/api/user/3');

// Good - Single batch request
fetch('/api/users?ids=1,2,3');

import { ASStorage } from '@react-native-async-storage/async-storage';

async function fetchWithCache(url) {
  const cached = await ASStorage.getItem(url);
  if (cached) return JSON.parse(cached);

  const response = await fetch(url);
  const data = await response.json();
  await ASStorage.setItem(url, JSON.stringify(data));
  return data;
}

// Bad
<FlatList
  renderItem={({ item }) => (
    <Button onPress={() => console.log(item.id)} />
  )}
/>

// Good
const renderItem = useCallback(({ item }) => (
  <Button onPress={handlePress} item={item} />
), [handlePress]);

// Good
{items.map(item => (
  <Item key={item.id} data={item} />
))}

// android/app/build.gradle
project.ext.react = [
  enableHermes: true,
]

# Android
cd android && ./gradlew assembleRelease

# iOS
Product → Scheme → Edit Scheme → Build Configuration → Release