How do you improve React Native performance at scale?

Long Answer

High performance in React Native is the result of deliberate choices across runtime, bundling, rendering, data flow, lists, images, and build configuration. My strategy is to measure first, then layer optimizations that cut JavaScript work, reduce bridge traffic, and move hot paths to native where appropriate.

1) Runtime and architecture

Enable Hermes to speed startup and reduce memory through ahead-of-time bytecode. Adopt the New Architecture (Fabric and TurboModules) so rendering and module calls avoid the legacy bridge bottleneck. Keep Hermes on both Android and iOS for parity, and verify improvements with cold start metrics.

2) Bundle size and startup

A smaller bundle parses faster. I remove unused code with tree shaking and dead code elimination, split platform code paths, and avoid heavy polyfills. I turn on inline requires in Metro to defer noncritical modules until they are needed, which lowers time to interactive. I extract very large feature modules into dynamic imports and use lazy loading in navigation so only the initial route is loaded at startup. Native builds use code shrinking (R8 or ProGuard) and resource shrinking; iOS builds enable dead stripping and bitcode alternatives where applicable.

3) Rendering and re-render hygiene

Unnecessary renders are the most common performance leak. I isolate state so updates do not cascade across the tree, use React.memo, useCallback, and useMemo for stable props, and prefer selector-based state reads (for example, Zustand or Redux Toolkit selectors with equality checks). I minimize context churn by splitting providers and avoiding frequent updates in global contexts. Expensive calculations run off the render path and are cached.

4) Navigation and lazy loading

I lazy load screens and feature stacks, prefetch likely next screens, and use skeleton placeholders. Deeply nested navigators are flattened where possible. I avoid synchronous heavy work in screen focus handlers and defer such work with InteractionManager so animations remain smooth.

5) Lists at scale with FlatList

For very large datasets I rely on FlatList (or SectionList) with disciplined settings: stable keyExtractor, getItemLayout for fixed or predictable sizes, realistic initialNumToRender, windowSize tuned to content, maxToRenderPerBatch and updateCellsBatchingPeriod to balance throughput, and removeClippedSubviews on scrollable parents. Item components are pure and memoized; no inline functions or closures inside renderItem. I avoid nested vertical lists; if unavoidable, I virtualize both carefully.

6) Animations and gestures

Animations must run on the native thread. I use React Native Reanimated and Gesture Handler so animations and interactions stay jank-free without crossing the bridge for every frame. For simple animations I prefer the native driver or Reanimated layout transitions. Gesture responders are debounced and trimmed to the smallest necessary regions.

7) Images, fonts, and media

I size images correctly, use modern formats, and rely on a native backed image component (for example, FastImage) with caching, prefetching, and priority control. I avoid unbounded images in lists and predecode above the fold. Fonts are subsetted and preloaded, and videos stream with hardware acceleration where available.

8) Data access, storage, and network

To avoid JavaScript memory blowups I keep large payloads out of the bundle and store them in native stores when needed: fast key-value stores (for example, MMKV) or SQLite-backed solutions for structured data. Network clients are configured for compression, keep-alive, and caching. I coalesce frequent writes and throttle rapid updates that could flood the bridge.

9) Build and release configuration

Debug builds are slow by design; I benchmark on release builds with the same flags as production. Android uses modern Gradle, R8, and resource shrinking; iOS uses link-time optimization and dead stripping. I keep native dependencies current to benefit from compiler and platform improvements. I monitor binary size budgets and fail builds that exceed thresholds.

10) Observability and profiling

I measure time to first frame, time to interactive, JavaScript thread frame drops, and memory with Flipper, Android Profiler, and Xcode Instruments. I keep a regression suite with performance budgets. When a regression appears, I sample JavaScript stacks, check expensive renders, and search for list stalls, image decoding spikes, or navigation waterfalls.

The essence is simple: reduce the work the application does, delay what is not needed yet, keep work where it belongs (native for frames, JavaScript for orchestration), and measure everything. With Hermes, bundle slimming, disciplined rendering, and a well-tuned FlatList, React Native can deliver smooth, native-feeling experiences at scale.

‍

Table

‍

Common Mistakes

• Shipping one giant bundle without inline requires or lazy loading, inflating startup time.
  
• Keeping frequently changing global state in context, forcing entire trees to re-render.
  
• Inline arrow functions and object literals inside renderItem, defeating memoization.
  
• Using FlatList without getItemLayout, stable keys, or realistic windowing, which causes stutter.
  
• Animations on the JavaScript thread instead of Reanimated or native driver, causing dropped frames.
  
• Loading large images at original size, no caching, and unbounded images in lists.
  
• Measuring only in debug builds and assuming performance will be fine in release.
  
• Upgrading libraries without profiling; accidental feature flags or dev toggles left on in production.
  
  

Sample Answers

Junior:
“I enable Hermes, turn on inline requires, and lazy load screens so the first screen appears faster. I use React.memo and stable callbacks to stop unnecessary renders. For lists, I use FlatList with stable keys and getItemLayout when item height is known.”

Mid:
“I separate fast-changing state from global state, use selector based stores, and memoize item rows. I tune FlatList windowing and clipping for smooth scroll, and I move animations to Reanimated. I shrink Android with R8 and resource shrinking and verify startup and memory in release builds.”

Senior:
“I adopt the New Architecture so rendering and modules avoid the bridge, enable Hermes, and keep a strict performance budget. Bundles are split by route with inline requires and dynamic imports, while images use native caching. Lists have predictable layouts and pure item components. I monitor time to interactive and frame drops with Flipper and Instruments, and I gate releases on performance checks.”

‍

Evaluation Criteria

Strong answers mention Hermes, New Architecture, and concrete bundle reduction tactics such as inline requires, dynamic imports, and resource shrinking. They demonstrate render discipline with memoization, selector based state, and context minimization. They provide specific FlatList settings such as stable keys and getItemLayout, along with windowing and clipping. They move animations to native through Reanimated and handle images with caching and correct sizing. They measure in release builds with Flipper and Instruments and keep budgets for startup, frames, and memory. Red flags include vague claims, ignoring list virtualization, JavaScript driven animations, or no measurement.

‍

Preparation Tips

• Enable Hermes and measure cold start and memory before and after.
  
• Turn on inline requires and move noncritical screens to dynamic imports; record time to interactive.
  
• Build a list benchmark screen and tune FlatList parameters until scrolling stays smooth.
  
• Convert a JavaScript thread animation to Reanimated; confirm frame stability.
  
• Replace an oversized image flow with cached, correctly sized images and verify memory reduction.
  
• Move a noisy global state value into a store with selectors and verify render counts drop.
  
• Configure Android R8 and resource shrinking, and iOS dead stripping; track binary size budgets.
  
• Profile with Flipper, Android Profiler, and Instruments on release builds and capture a baseline dashboard.
  
  

Real-world Context

A retail application cut cold start by forty percent after enabling Hermes and inline requires, then lazy loading all but the first route. A social feed removed inline closures and added memoized row components with getItemLayout, eliminating scroll jank on low-end devices. A delivery application moved animations to Reanimated and adopted Gesture Handler, making complex swipe interactions stay at sixty frames per second. A finance application replaced ad-hoc image handling with native caching and proper sizing, reducing out-of-memory errors. In each case the gains came from trimmed bundles, fewer renders, native backed animations, and predictable lists.

‍

Key Takeaways

• Enable Hermes and the New Architecture to reduce startup and bridge overhead.
  
• Shrink bundles and defer noncritical code with inline requires and dynamic imports.
  
• Prevent unnecessary renders with memoization and selector based state.
  
• Tune FlatList with stable keys, getItemLayout, windowing, and clipping.
  
• Run animations natively and cache and size media correctly.
  
• Measure in release builds and gate releases on performance budgets.
  
  

Practice Exercise

Scenario:
You are handed a React Native application that feels sluggish on cold start and stutters while scrolling a large product list with images. You must deliver measurable improvements without changing features.

Tasks:

1. Establish a baseline: record cold start time to first paint and time to interactive, JavaScript frame drops while scrolling, memory at idle and during the list, and binary sizes.
   
2. Enable Hermes and the New Architecture in a branch. Rebuild release builds and measure deltas.
   
3. Turn on inline requires, convert secondary screens to dynamic imports, and lazy load entire feature stacks in the navigator. Verify that the first screen renders earlier.
   
4. Refactor the product list: add stable keys, implement getItemLayout, tune initialNumToRender, windowSize, maxToRenderPerBatch, and removeClippedSubviews. Make renderItem a pure memoized component with stable props.
   
5. Replace image handling with a native backed cached image component, set correct sizes, and prefetch above the fold.
   
6. Move any interactive animations to Reanimated and Gesture Handler.
   
7. Reduce re-renders: scope state to the screen, use a selector based store, and memoize expensive derived data.
   
8. Rebuild release builds, capture the same metrics, and create a one-page report with before and after numbers and the exact configuration changes.
   
   

Deliverable:
A performance report and code diffs that demonstrate faster startup, smooth list scrolling, lower memory, and a maintainable React Native performance configuration ready for production.