Reduce re-renders, optimize lists, and use the new architecture—make your RN app feel native and fast.
Performance in React Native affects UX and retention. Here’s how to measure and improve it.
React Native performance
Key areas
Lists — Use FlatList (or FlashList) with keyExtractor, getItemLayout when item height is fixed, and windowSize to limit rendered items. Avoid mapping over huge arrays to render; use virtualization.
Re-renders — Memoize with React.memo; use useCallback and useMemo for props and expensive values. Avoid inline objects/functions as props when the parent re-renders often.
Images — Use resizeMode and appropriate dimensions. Prefer FastImage for remote images (caching). Lazy load off-screen images in lists.
Bridge — Minimize round-trips. Batch updates; avoid passing huge objects. The new architecture (Fabric, JSI) reduces bridge overhead; enable it when possible.
Hermes — Use Hermes engine for faster startup and lower memory. It’s the default in new RN and Expo.
Performance focus (RN teams):
Where RN teams optimize most
Tooling
Use Flipper or React DevTools to inspect re-renders. Use the performance monitor (shake device or dev menu). Profile with Xcode Instruments and Android Profiler for native bottlenecks.
RN performance deep dive:
Takeaway
Optimize lists first; then reduce re-renders and image load. Enable the new architecture and Hermes. Measure before and after so you don’t optimize the wrong thing.
