How do you optimize React Native app performance?

Question

Accepted Answer

Optimizing React Native performance involves minimizing unnecessary **re-renders**, efficient **lists**, reducing **JS-thread work** and bridge traffic, optimizing images, and using the native thread for animations. Performance is important for smooth, responsive apps.

## Minimize re-renders (a key React concern)

```text
✓ Avoid unnecessary RE-RENDERS:
  → React.memo (memoize components), useMemo (values), useCallback (functions)
  → correct, stable KEYS in lists; avoid creating new objects/functions inline that
    cause children to re-render
  → proper state structure (don't put everything in one big state that re-renders all)
```

## Efficient lists

```text
✓ Use FLATLIST (not ScrollView + map) for long lists — lazy rendering/virtualization
✓ Optimize FlatList: keyExtractor, getItemLayout, windowSize, removeClippedSubviews;
  keep item components light and memoized
✓ For very large/complex lists → FlashList (Shopify) — a faster drop-in alternative
```

## JS thread and bridge

```text
✓ The JS thread runs your code — keep it free for responsiveness (avoid heavy synchronous
  work; it causes jank/dropped frames)
✓ Minimize BRIDGE traffic (old architecture) — frequent JS↔native passes are costly
  (the NEW ARCHITECTURE / JSI reduces this)
✓ Run ANIMATIONS on the native thread (useNativeDriver / Reanimated) — not the JS thread
✓ Offload heavy computation; debounce expensive operations
```

## Other optimizations

```text
✓ Optimize IMAGES (sizes, caching — e.g. FastImage); lazy-load
✓ Reduce app startup time and bundle size; use Hermes (optimized JS engine)
✓ PROFILE to find bottlenecks (Flipper, performance monitor, React DevTools profiler)
✓ Test on lower-end devices (not just high-end)
```

## Why it matters

Understanding React Native performance optimization is valuable senior-level knowledge because **smooth performance is essential for good user experience**, and React Native has specific performance considerations, so it's important for building quality apps.

Like React for web, a key concern is **minimizing unnecessary re-renders** (using React.memo, useMemo, useCallback, stable keys, and proper state structure to avoid re-rendering components needlessly) — a common performance issue in React Native apps. **Efficient lists** are critical: using **FlatList** (not ScrollView + map) for long lists with proper optimization (keyExtractor, getItemLayout, light memoized item components), and using **FlashList** for very large lists — since lists are common and poorly-rendered ones cause real performance problems.

Understanding **JS-thread and bridge** considerations is particularly important and React-Native-specific: the **JS thread must stay free** for responsiveness (heavy synchronous work causes jank), **bridge traffic** (in the old architecture) is costly so JS↔native communication should be minimized (the new architecture/JSI reduces this), and crucially **animations should run on the native thread** (via useNativeDriver/Reanimated, not the JS thread) for smoothness — these reflect React Native's unique JS/native threading architecture and its performance implications.

Other optimizations (image optimization with caching, reducing startup/bundle size, using Hermes, profiling to find bottlenecks, and testing on lower-end devices) round out the toolkit.

Smooth performance directly affects UX, and React Native's architecture introduces specific considerations (JS thread, bridge, native-thread animations) beyond general React optimization.

Since smooth performance is essential for UX and React Native has specific performance considerations (re-renders, efficient lists, the JS thread/bridge, native-thread animations), and since proper optimization addressing these keeps apps smooth, understanding React Native performance optimization is valuable senior-level knowledge for building responsive, polished apps — a key skill reflecting both React optimization (re-renders, lists) and React-Native-specific concerns (JS thread, bridge, native animations), important for the performance awareness expected of senior React Native developers.