React Native performance tips

rop in crash rates (ANR/Watchdog terminations) and a 40%+ improvement in user retention on emerging markets with mid-tier devices.

Core Solution

Performance optimization in React Native requires a layered strategy: thread isolation, bridge minimization, deterministic rendering, and aggressive caching. The following implementation steps are production-tested and framework-agnostic.

Step 1: Thread Isolation with Reanimated 3

Animations and gesture-driven UI updates must run on the UI thread. Reanimated 3 uses JSI to bypass the bridge, executing worklets directly in the native runtime.

import Animated, { useSharedValue, useAnimatedStyle, withSpring, runOnUI } from 'react-native-reanimated';
import { Pressable, View } from 'react-native';

export const AnimatedCard = () => {
  const scale = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  const handlePress = () => {
    // runOnUI ensures the animation executes without bridge serialization
    runOnUI(() => {
      scale.value = withSpring(scale.value === 1 ? 1.05 : 1, { damping: 12 });
    })();
  };

  return (
    <Pressable onPress={handlePress}>
      <Animated.View style={[{ width: 200, height: 200, backgroundColor: '#3b82f6' }, animatedStyle]} />
    </Pressable>
  );
};

Architecture Rationale: UI thread worklets eliminate frame drops caused by JS thread scheduling. Reanimated's shared values maintain state in native memory, avoiding JS-to-native serialization entirely.

Step 2: Deterministic List Rendering with FlashList

FlatList relies on dynamic layout measurement, which causes recalculation overhead during fast scrolling. FlashList (by Shopify) uses fixed-size recycling and pre-calculated layout bounds.

import { FlashList } from '@shopify/flash-list';
import { Text, View } from 'react-native';

interface Item { id: string; title: string; }

export const OptimizedList = ({ data }: { data: Item[] }) => {
  return (
    <FlashList
      data={data}
      estimatedItemSize={80} // Critical: enables layout prediction
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={{ height: 80, padding: 16 }}>
          <Text>{item.title}</Text>
        </View>
      )}
      getItemLayout={(_, index) => ({ length: 80, offset: 80 * index, index })}
    />
  );
};

Architecture Rationale: estimatedItemSize and getItemLayout remove layout thrashing. FlashList's recycling algorithm reuses native views without measuring, cutting render time by 60–70% for lists exceeding 100 items.

Step 3: Image Pipeline Optimization

Image decoding and memory allocation are primary sources of OOM crashes. react-native-fast-image with explicit cache policies prevents heap fragmentation.

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

export const CachedImage = ({ uri }: { uri: string }) => (
  <FastImage
    style={{ width: 120, height: 120 }}
    source={{
      uri,
      priority: FastImage.priority.normal,
      cache: FastImage.cacheControl.web, // Uses HTTP cache headers
    }}
    resizeMode={FastImage.resizeMode.cover}
  />
);

Architecture Rationale: Web cache mode respects server headers, avoids duplicate downloads, and pins decoded bitmaps in native memory pools. Combined with placeholder loading, it eliminates layout shifts and GC spikes.

Step 4: State & Render Boundary Control

Memoization is ineffective if dependencies change on every render. Use structural equality checks and isolate heavy computations.

import React, { useMemo, useCallback } from 'react';
import { View, Text } from 'react-native';

type RowProps = { id: string; metadata: Record<string, unknown> };

export const MemoizedRow = React.memo(({ id, metadata }: RowProps) => {
  const processed = useMemo(() => {
    // Expensive transformation runs only when metadata changes
    return Object.entries(metadata).reduce((acc, [k, v]) => {
      acc[k] = String(v).toUpperCase();
      return acc;
    }, {} as Record<string, string>);
  }, [metadata]);

  return (
    <View>
      <Text>{id}</Text>
      <Text>{processed.name ?? 'N/A'}</Text>
    </View>
  );
});

Architecture Rationale: React.memo with stable references prevents unnecessary native view recreation. useMemo isolates CPU-bound work. For heavier tasks, offload to react-native-quick-crypto or a dedicated worker thread.

Step 5: Hermes & Metro Configuration

Hermes compiles JS to bytecode at build time, eliminating parse/compile overhead at startup. Metro must be configured to tree-shake unused modules.

// metro.config.js
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true, // Reduces initial bundle size
      },
    }),
  },
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx', 'json'],
  },
};

Architecture Rationale: Hermes reduces startup time by 40–60% and memory usage by 20–30%. inlineRequires defers module loading until execution, cutting initial JS evaluation time.

Pitfall Guide

1. Treating RN like React Web: Assuming declarative UI automatically optimizes rendering. RN bridges to native; every state update triggers serialization. Best practice: Profile with react-native-performance and isolate UI updates to the native thread.
2. Missing keyExtractor or getItemLayout in lists: Causes full list remount on scroll. Best practice: Always provide deterministic keys and layout hints for predictable recycling.
3. Inline functions/objects in JSX: Breaks React.memo and useCallback comparisons. Best practice: Extract handlers outside render scope or use useCallback with stable dependencies.
4. Unbounded image memory usage: Loading high-res images without downscaling or cache policies causes OOM. Best practice: Use fast-image with explicit cache control, and provide multiple resolution variants.
5. Heavy synchronous JS operations: JSON.parse, large array filters, or regex on the main thread blocks frame rendering. Best practice: Chunk operations, use requestAnimationFrame, or move to JSI-backed native modules.
6. useEffect chains for data fetching: Triggers multiple bridge crossings and layout recalculations. Best practice: Prefetch data during navigation transitions, use suspense boundaries, and cache responses in Zustand/Redux with persistence.
7. Ignoring native module overhead: Custom TurboModules or bridge modules with complex payloads degrade performance. Best practice: Keep payloads flat, use primitive types, and batch updates. Prefer JSI over legacy bridge for high-frequency calls.

Production Bundle

Action Checklist

• Thread Audit: Identify all animations, gestures, and high-frequency updates; migrate to Reanimated 3 worklets.
• List Optimization: Replace FlatList with FlashList; set estimatedItemSize and getItemLayout.
• Image Pipeline: Integrate react-native-fast-image; enforce cache policies and resolution constraints.
• Render Boundaries: Audit React.memo, useCallback, and useMemo; eliminate inline dependencies.
• Build Configuration: Enable Hermes, configure Metro inlineRequires, and strip debug symbols for release.
• Profiling Baseline: Run react-native-performance and Flipper CPU/Memory profilers; establish pre/post optimization metrics.

Decision Matrix

Scenario	Recommended Approach	Why	Cost Impact
Heavy scrollable feeds (>200 items)	FlashList + getItemLayout	Eliminates layout thrashing; deterministic recycling	Low (dependency + config)
Real-time data dashboards	WebSocket + JSI native module	Bypasses bridge; reduces serialization latency	Medium (native code)
Complex gesture-driven UI	Reanimated 3 + Gesture Handler	Runs on UI thread; 60fps without JS blocking	Low (JS library)
Image-heavy marketplaces	FastImage + CDN variants	Prevents OOM; respects HTTP caching	Low (library + infra)
Offline-first data sync	Zustand + MMKV persistence	Synchronous storage; avoids async bridge delays	Low (library swap)

Configuration Template

// babel.config.js
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'react-native-reanimated/plugin', // Must be last
  ],
};

// android/app/build.gradle (Hermes)
project.ext.react = [
    enableHermes: true,
    hermesFlags: ["-O", "-output-source-map"]
]

// ios/Podfile (Hermes)
use_react_native!(
  :path => config[:reactNativePath],
  :hermes_enabled => true
)

// metro.config.js
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: { inlineRequires: true },
    }),
  },
};

Quick Start Guide

1. Install dependencies: npm i @shopify/flash-list react-native-reanimated react-native-fast-image
2. Add Reanimated plugin to babel.config.js as the last entry; rebuild the app.
3. Replace existing FlatList components with FlashList; set estimatedItemSize matching your row height.
4. Swap Image imports to FastImage; apply explicit cache and resize modes.
5. Run npx react-native run-android --variant=release (or iOS equivalent); verify FPS and memory using Flipper or Xcode Instruments.