React Native Performance: 8 Things I Fixed That Made a Huge Difference

A few months ago, I was working on an expo-based app for a client in Dubai, and the beta build felt like molasses on a tablet. First screen took 12 seconds to load, scrolling in lists stuttered, and animations froze during transitions. Not great for an app targeting Arabic-speaking users who expect instant feedback. After diving into the code and chasing red herrings for a full week, I fixed 8 performance issues that dropped the cold boot time to under 3 seconds. This isn't about vague advice—I'm showing the exact optimizations I made using React Native 0.73, Expo SDK 54, and Hermes 0.16 that actually moved the needle.

Reducing JavaScript Bundle Size: Why Splitting Made Me Gasp-Load Faster

The first thing I checked was the JavaScript bundle size. The metro bundler was outputting a single 6MB file—way too big for a mid-sized app. Splitting it using React Native's dynamic imports cut cold boot time by 40% immediately.

Here's what I did:

1. Moved third-party libraries like React Navigation and Firebase into separate dynamic import statements
2. Split core features like authentication flow and AI plant identification module into separate bundles
3. Used react-native-code-splitting with Hermes enabled for better caching

I'll be real—it took me an afternoon to figure out the right Webpack config tweaks for Expo. But the payoff was worth it: initial JS load dropped from 5.2s to 1.8s on a mid-range Android device.

Preventing Unnecessary Re-renders: When useMemo Wasn't Enough

The UI would freeze whenever the app fetched new data in the background. Profiling showed components re-rendering even when data hadn't changed. I reached for useMemo, but it didn't solve the issue because state changes were triggering parent component updates anyway.

What worked better:

• •Used React's useCallback to stabilize function references in context providers
• •Wrapped heavy components in React.memo() with custom areEqual comparison
• •Split context providers per-logical feature instead of having one massive context

One tricky spot was a component tree under the tab navigator that kept remounting every time the app came back from background. Adding a simple key prop based on user ID fixed that.

Image Handling: Why My 400KB PNGs Needed Actual Optimization

There's an Abu Dhabi real estate client I work with whose property listing screen looked like a loading spinner graveyard. The problem wasn't network speed—it was local image processing. PNGs saved at 400KB each were getting decompressed into 10x larger bitmaps in memory.

Image wins came from:

1. Using Squoosh to compress images without visible quality loss (average saving: 65% per image)
2. Implementing resizeMode="cover" instead of CSS transform scaling
3. Switching to WebP format for photos (25% smaller than JPEG with alpha support)

Bonus fix: Added a placeholder from react-native-blurhash while images were loading. Users in Gulf markets with spotty connections got a better experience without seeing blank spaces during network hiccups.

JS vs Native Modules: When I Finally Built a Native Bridge

The AI plant identification feature used TensorFlow.js for on-device inference. It worked, but caused visible jank during camera preview. After three failed attempts at optimizing the JS code, I bit the bullet and rewrote the AI logic in Swift for iOS using React Native's TurboModule system.

The performance delta was night and day:

• •Frame drops during camera use went from 23% to 3%
• •Battery consumption dropped by 40% in profiling tests
• •Memory usage stabilized around 200MB vs 1.2GB spikes

Was it worth writing native code? Absolutely—for critical features where JS can't keep up. For Android, I paired it with TensorFlow Lite for even better results.

Code Splitting vs Dynamic Imports: Why I Combine Both

A common mistake I see: developers think React.lazy + dynamic imports magically solve everything. In practice, I needed to structure routes carefully and use @react-navigation/native lazy loading to minimize JS required before rendering the first screen.

Optimal setup:

1. Loaded core navigation and authentication in initial bundle
2. Lazily imported all deep-linkable features
3. Used Expo's expo-router with native navigation for smoother transitions

This helped reduce the core JS required before user interaction, especially important for clients whose users have older Android devices (looking at you, Samsung Galaxy A32 users in Saudi).

Animation Performance: Why LayoutAnimation Was Holding Me Back

Tab transitions were stuttering between screens in a bilingual app I built for a UAE client. React Native's default LayoutAnimation was too slow for complex screens. I switched to Reanimated 3 with the JS+Skia engine and saw immediate improvements.

Real numbers:

• •60fps locked smoothness from 34fps previously
• •Animation frame drops eliminated even on iOS 15 devices
• •Gestures felt more responsive with 16ms frame intervals

A gotcha I hit: Reanimated 3 requires Hermes to be enabled. Took me forever to track down that dependency since the error message wasn't clear about it.

Firebase Realtime Sync: When Over-Fetching Ruined My Frame Rate

A logistics app I built for a Dubai client had live order tracking using Firebase's onSnapshot. Turns out listening to 200+ order documents in real-time without filters was causing constant JS main thread interruptions.

The fix involved:

• •Batch subscribing to only active orders using where("status", "in", ["in_transit", "pending"])
• •Debounce Firestore updates on the client with setTimeout
• •Memoized snapshot listeners to avoid redundant processing

After these changes, frame drops during background sync dropped from 15% to under 1%.

Profiling Tools: Why I Didn't Rely on Flipper At First

Flipper's performance insights are decent, but sometimes you need more precision. I used React Native's built-in Systrace + Chrome's trace tool to pinpoint that 400ms delay coming from synchronous state mutations in the Redux store.

Key profiling combo:

• •Chrome DevTools Performance tab for JS profiling
• •React DevTools Profiler to catch unnecessary re-renders
• •console.log spammed timing markers (low-tech but effective)

One late-night debugging session revealed that importing Moment.js for date formatting was adding 800ms to the bundle. Switched to date-fns with tree shaking and saved half a second.

### Why is my React Native app running slowly on Android but smooth on iOS?

Performance discrepancies between Android and iOS often come down to JavaScript engine choices and native modules. Android typically uses JavaScriptCore unless you enable Hermes, which significantly improves execution speed. I once optimized a logistics company's app in Dubai by simply switching to Hermes and splitting the JS bundle, which reduced load times from 9s to 2.7s on a Moto G7.

### How do I fix slow navigation in React Native apps?

Slow navigation usually points to either oversized bundles or inefficient screen transitions. In one UAE real estate app, switching from React Navigation's stack navigator to native stack (which uses platform-specific native components) improved transition smoothness. Also, implementing code splitting to load screens only when needed cut initial navigation load times by 60%.

### Should I use React.memo() for every component?

No—you'll end up with unnecessary complexity. Use React.memo() only on large lists or components that render frequently but don't need to update. While building Greeny Corner, I applied it selectively to the plant card components in a FlatList. For smaller components, the performance gain was negligible and added more code friction.

### What's the best way to handle image caching in React Native?

Implement an image caching strategy that stores resized versions and placeholders. I use react-native-fast-image with disk caching enabled for most projects, including that plant care app. Combine it with Blurhash placeholders and you'll eliminate blank spaces during network loading, which is critical for users in areas with spotty connectivity like parts of the UAE.

I've been optimizing React Native apps for UAE companies since 2017—from e-commerce platforms in Abu Dhabi that need Arabic language support, to logistics apps that require AI integration. If you're stuck on a performance problem or just want a second opinion, book a free consultation to talk through your specific challenges beyond generic best practices.