React Native Performance Optimization: 15 Ways to Speed Up Your App

Updated for the New Architecture, Hermes V1, React Native DevTools, React Compiler 1.0, FlashList v2 and AI assisted performance tools. Old advice such as Flipper and react-native-fast-image has been replaced.

Quick answer: To improve React Native app performance, first measure in a release build with React Native DevTools and the platform profilers. Then fix the biggest problem: move to a current React Native version on the New Architecture with Hermes V1, turn on React Compiler to cut extra renders, replace long ScrollViews with FlashList or a tuned FlatList, cache and resize images, run animations on the UI thread, clean up memory leaks and shrink the app bundle. Most apps get the biggest gains from upgrading, list fixes and image fixes.

Key Takeaways

• Since React Native 0.82 (October 2025), every app runs on the New Architecture. The old bridge is gone from the runtime.
• Hermes V1 became the default JavaScript engine in React Native 0.84 (February 2026), with no setup needed for apps already on Hermes.
• React Native DevTools replaced Flipper in 0.76, and since 0.83 it includes Network and Performance panels.
• React Compiler 1.0 adds memoization for you at build time, and new Expo apps get it by default from SDK 54.
• FlashList v2 reduced blank areas while scrolling by up to 50% in Shopify's tests on the New Architecture.
• Always test performance in a release build. Development mode is much slower and gives misleading results.
• AI assistants with React Native agent skills and the Expo MCP server can find problems and draft fixes faster, but a developer must still measure and review.

What Changed in React Native Performance Since 2021?

Much of the performance advice written before 2024 is now out of date. The table shows what to stop doing and what to do instead.

Sources: React Native 0.82 release; React Native 0.84 release; React Native DevTools docs.

Measure First: How to Find What Is Slow

React Native aims for at least 60 frames per second. That leaves about 16.67 milliseconds to draw each frame. If the work takes longer, the app drops frames and feels slow. React Native has two main threads to watch:

• JavaScript thread: runs your React code, business logic, API calls and touch handling. If it is busy, buttons respond late and JS driven animations freeze.
• UI (main) thread: draws native views. Native scrolling and native stack transitions keep running even when the JavaScript thread is busy.

The official docs give a clear example: a heavy state update on a complex root component might take 200 milliseconds and drop 12 frames.

Tools to Use

Important: The React Native docs say JavaScript performance "suffers greatly when running in dev mode". Always measure in a release build, on a real mid range or low end Android phone, not only on a new iPhone or an emulator.

Source: React Native docs, Performance Overview.

Set a Performance Budget

Write simple targets before you start, so you know when you are done. Here is a template. The numbers are examples to adapt to your app and users, not official limits.

Why React Native Apps Get Slow

• Too many renders: a state change high in the tree renders large parts of the screen again.
• Long lists in a ScrollView: ScrollView renders every child at once, even the ones off screen.
• Large, uncached images: full size photos are downloaded, decoded and scaled on every screen.
• Busy JavaScript thread: heavy work runs during taps, navigation or animations.
• Memory leaks: listeners, timers and subscriptions are never cleaned up.
• Old versions and libraries: the app misses years of engine and architecture improvements.
• Logs left in production: console calls slow down the JavaScript thread.

Faster Startup

1. Upgrade to a Current React Native Version on the New Architecture

The New Architecture replaces the old asynchronous bridge with JSI, TurboModules and the Fabric renderer. React Native 0.82, released on 8 October 2025, was the first version that runs entirely on the New Architecture. Setting the old flags to turn it off is ignored. Later versions keep removing legacy code. In 0.84, legacy code is no longer compiled into iOS builds by default, which reduces build time and app size.

If your app is still on the old architecture, the official path is:

1. Move to React Native 0.81 or Expo SDK 54, the last versions that allow the legacy architecture.
2. Turn on the New Architecture there and test the app.
3. Update to 0.82 or later.

If a third party library blocks you, check for a maintained alternative or contact its maintainers. The official release branches page now lists versions up to 0.88, so an app still on a 2023 or 2024 version is several releases behind.

2. Use Hermes V1 (It Is Probably Already On)

Hermes has been the default JavaScript engine since React Native 0.70. Hermes V1 became the default in 0.84, and apps already on Hermes get it with no configuration changes. React Native describes better execution speed and lower memory use. When Hermes V1 was still experimental in 0.82, tests on the Expensify app showed:

React Native notes that results depend strongly on each app. You can check which engine version is running with this line in your app or in DevTools:

HermesInternal.getRuntimeProperties()['OSS Release Version'];

The old steps from 2021 posts, such as setting enableHermes: true in build.gradle, are no longer needed.

Sources: React Native 0.82 release; React Native 0.84 release.

3. Do Less Work at Startup and Remove Logs

• Load only the first screen. Load other screens and heavy libraries when the user opens them, not at launch.
• Delay work that is not urgent. Analytics, prefetching and cache cleanup can wait until the first screen is ready.
• Keep the first API call small. Show the screen with the data you need first, then load the rest.
• Remove console calls in production. The docs warn that console statements can be a big bottleneck on the JavaScript thread, even when they come from a library. Add this to your Babel config:

{
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

This uses the babel-plugin-transform-remove-console package. Install it as a development dependency first.

Smoother Rendering

4. Turn On React Compiler

React Compiler 1.0 was released on 7 October 2025. It is a build time tool that adds memoization to components and hooks for you, without rewrites, and it works with React Native. New apps created with npx create-expo-app@latest on Expo SDK 54 and later have it turned on by default. On the Meta Quest Store, the React team reported up to 12% faster initial loads and page changes, and some interactions more than 2.5 times faster, with memory use unchanged.

To add it to an existing app:

npm install --save-dev --save-exact babel-plugin-react-compiler@latest

Then follow the React team's incremental adoption guide. Keep your existing useMemo and useCallback calls. The React team recommends leaving them in place in existing code. If your test coverage is low, pin an exact compiler version and upgrade by hand.

Source: React blog, React Compiler v1.0.

5. Use React.memo, useMemo and useCallback Correctly

Many older articles mix these up. Here is what each one does:

• React.memo skips rendering a component again when its props have not changed.
• useMemo caches the result of a calculation between renders.
• useCallback keeps the same function between renders, so memoized children do not render again because of a "new" function prop.

PureComponent only works with class components. For function components, use React.memo. Here is a list where only the rows that change render again:

import { memo, useCallback, useState } from 'react';
import { FlatList, Pressable, Text } from 'react-native';

const Row = memo(function Row({ item, selected, onSelect }) {
  return (
    <Pressable onPress={() => onSelect(item.id)}>
      <Text style={{ fontWeight: selected ? '700' : '400' }}>{item.name}</Text>
    </Pressable>
  );
});

export function ProductList({ products }) {
  const [selectedId, setSelectedId] = useState(null);

  const onSelect = useCallback((id) => setSelectedId(id), []);

  const renderItem = useCallback(
    ({ item }) => (
      <Row item={item} selected={item.id === selectedId} onSelect={onSelect} />
    ),
    [selectedId, onSelect]
  );

  return (
    <FlatList
      data={products}
      keyExtractor={(item) => item.id}
      renderItem={renderItem}
    />
  );
}

With React Compiler turned on, much of this memoization happens for you. The idea is still worth knowing, because it explains why a screen renders too often.

6. Keep State Close to Where It Is Used

• Do not put fast changing state at the root. A timer, text input or scroll position stored at the top of the app makes the whole tree render again.
• Split large contexts. When one value in a big context changes, every component that reads that context renders again. Use smaller contexts or a state library with selectors.
• Avoid creating new objects and arrays in props on every render for memoized children, or let React Compiler handle it.
• Use transitions for slow updates. startTransition and useDeferredValue keep typing and taps responsive while a heavy list updates. React Native 0.82 fixed how they behave inside Suspense boundaries.

Faster Lists

7. Never Put Long Lists in a ScrollView, and Tune FlatList

ScrollView renders all of its children at once. That is fine for a short screen but slow for a feed or catalog. Use a virtualized list such as FlatList or SectionList, which only renders what is near the screen. If every row has the same height, add getItemLayout so the list does not have to measure each row. The official docs recommend this.

const ITEM_HEIGHT = 72;

<FlatList
  data={products}
  keyExtractor={(item) => item.id}
  renderItem={renderItem}
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
  initialNumToRender={10}
  windowSize={5}
/>

• keyExtractor: use a stable ID, not the array index.
• initialNumToRender: render just enough rows to fill the first screen.
• windowSize: a smaller value uses less memory, while a larger value reduces blank areas during fast scrolling. Test both.
• Simple rows: keep row components light and move heavy logic out of renderItem.

8. Switch Heavy Lists to FlashList v2 or Legend List

The React Native docs suggest list libraries such as FlashList and Legend List for large lists. Shopify released FlashList v2 on 31 July 2025 as a full rewrite built on the New Architecture. You no longer need to give size estimates for items, and Shopify's tests showed up to 50% less blank area while scrolling compared with v1. It also adds masonry layouts and keeps the scroll position by default.

import { FlashList } from '@shopify/flash-list';

<FlashList
  data={products}
  keyExtractor={(item) => item.id}
  renderItem={renderItem}
/>

Test on a low end Android phone, because that is where list problems show first.

Source: Shopify Engineering, FlashList v2.

Faster Images

9. Cache Images With a Maintained Library

Older posts recommend react-native-fast-image, but its users widely report it as unmaintained. Common choices now are expo-image, which works in Expo and bare React Native apps, and the maintained fork @d11/react-native-fast-image. With expo-image you can set a cache policy and a short fade in:

import { Image } from 'expo-image';

<Image
  source={{ uri: product.imageUrl }}
  style={{ width: 120, height: 120 }}
  contentFit="cover"
  cachePolicy="memory-disk"
  transition={150}
/>

10. Send the Right Size and Format

• Resize on the server or CDN. Do not send a 3000 pixel photo to show a 120 pixel thumbnail.
• Use WebP for photos. PNG is best for small icons and images that need sharp edges. It is usually much larger than WebP for photos.
• Use vector icons or an icon font instead of many PNG files.
• Do not animate image width and height. The React Native docs say this is expensive on iOS. Animate transform: [{ scale }] instead.
• Show placeholders so the layout does not jump while images load.

Smoother Animations and Touches

11. Run Animations on the UI Thread

The Animated API runs on the JavaScript thread unless you set useNativeDriver: true. With the native driver, the animation keeps running smoothly even when JavaScript is busy.

Animated.timing(opacity, {
  toValue: 1,
  duration: 250,
  useNativeDriver: true,
}).start();

• Gestures and complex animations: use React Native Reanimated, which runs animation logic on the UI thread.
• Simple layout changes: LayoutAnimation is not affected by JS or UI thread frame drops, but it only suits animations that do not need to be interrupted.
• Instant touch feedback: if a tap starts heavy work, wrap that work in requestAnimationFrame so the button's pressed state appears first.

function handlePress() {
  requestAnimationFrame(() => {
    doExpensiveAction();
  });
}

Memory and Heavy Work

12. Find and Fix Memory Leaks

Leaks make apps slower the longer they run, and can end in crashes on low memory phones. The most common cause is something started in an effect that is never stopped.

useEffect(() => {
  const subscription = AppState.addEventListener('change', handleAppState);
  const timer = setInterval(refreshData, 30000);

  return () => {
    subscription.remove();
    clearInterval(timer);
  };
}, []);

• Remove event listeners, timers, sockets and subscriptions when a screen closes.
• Cancel network requests the user no longer needs.
• Do not keep large lists or images in global state after the user leaves a screen.
• Compare heap snapshots in the DevTools Memory panel before and after opening and closing a screen a few times.

13. Move Heavy Work Off the JavaScript Thread

• Native modules: with TurboModules, heavy tasks such as image processing, encryption or parsing large files can run in native code.
• JSI libraries: many popular libraries now talk to native code directly through JSI. A common example is react-native-mmkv for fast key and value storage.
• Do less on the device: sort, filter and group large data on the server when you can, and request only the fields you need.
• Check your backend. Some "slow app" reports are really slow APIs. Our guide on scalable backends covers that side.

Smaller Apps and Faster Builds

14. Reduce App Size

• Ship an Android App Bundle so each phone downloads only the code for its own architecture.
• Turn on R8 in release builds. In android/app/build.gradle, set enableProguardInReleaseBuilds to true and test the release build carefully.
• Remove unused libraries and assets. Every dependency adds JavaScript and often native code.
• Stay current on iOS. From 0.84, legacy architecture code is not compiled into iOS builds by default, which reduces app size.
• Compress images and fonts, and load large assets from a CDN when they are not needed offline.

15. Speed Up Your Build

Slow builds do not affect users directly, but they slow down every fix. The official React Native docs list these steps:

• Build one Android ABI during development. By default Android builds four. The docs say building only one can cut native build time by about 75%.

yarn react-native run-android --active-arch-only

• Turn on Gradle configuration caching (React Native 0.79 and later) in android/gradle.properties:

org.gradle.configuration-cache=true

• Use ccache to reuse compiled C++ code on Android and iOS. On iOS, turn it on in the Podfile:

post_install do |installer|
  react_native_post_install(
    installer,
    config[:reactNativePath],
    :mac_catalyst_enabled => false,
    :ccache_enabled => true
  )
end

• Use precompiled iOS binaries. From 0.84 they are on by default, so React Native core is not rebuilt from source on every clean build.
• Large teams: use a Maven mirror for Android and a distributed cache such as sccache.

Remember to remove the single ABI setting before you build a release APK or bundle.

Source: React Native docs, Speeding up your Build phase.

Navigation Performance

Use React Navigation with the native stack, or Expo Router, which is built on React Navigation. The native stack uses the platform's own screen transitions, so they stay smooth when JavaScript is busy. Also:

• Do not load heavy data before the transition starts. Show the new screen first, then load its data.
• Keep the number of mounted screens reasonable in tab and drawer navigators.
• Avoid passing large objects as route params. Pass an ID and read the data from your store or cache.

Android Performance Tips

Android phones vary much more than iPhones, so most performance complaints come from Android.

• Test on a low end or mid range Android phone in every release cycle.
• Watch for overdraw: avoid stacking many views with backgrounds on top of each other.
• On Android, transparent text over an image costs extra work on every frame while it moves. The docs suggest renderToHardwareTextureAndroid for moving views, but turn it off when the movement ends because it uses more memory.
• Use Android vitals in the Play Console to track slow frames, ANRs and crashes from real users.

React Native TV Apps (Fire TV and Android TV)

TV apps have extra limits: modest hardware, a remote instead of touch, and large screens full of images. Amazon's Vega developer docs, which cover React Native for Fire TV, focus on these metrics and areas:

• Metrics: time to first frame, time to fully drawn, foreground and background memory, and UI and video fluidity.
• Focus management: moving focus with the remote must feel instant, so avoid heavy renders on focus changes.
• Efficient rendering: keep rows of tiles virtualized and memoized.
• Image optimization: request tile images at the size shown on screen.
• Memory and animations: TV devices often have less memory than phones, so limit large animations and cached images.

For Apple TV and Android TV, many teams use the community react-native-tvos project. Test on the real TV device, because desktop emulators hide most TV performance problems.

Source: Amazon Developer, Vega performance overview.

Tips for Expo Apps

• Stay on a current Expo SDK. SDK 54 was the last one that allowed the legacy architecture.
• New Expo apps on SDK 54 and later have React Compiler turned on by default. Check that older projects have it too.
• Use expo-image for images and test in a release build, not only in Expo Go.
• Check the Expo Network panel in DevTools. It has fewer features than the React Native Network panel.

React Native Performance Checklist

Worked Example: Planning a Performance Sprint (Hypothetical)

Imagine a shopping app on a 2023 React Native version. Users complain that the product list stutters and the app feels slow to open. A two week plan could look like this:

1. Days 1 to 2: Measure a release build on a mid range Android phone. Record cold start, list frame rate and memory.
2. Days 3 to 6: Upgrade through 0.81 with the New Architecture on, then to a current version with Hermes V1.
3. Days 7 to 8: Replace the product ScrollView with FlashList v2 and move images to expo-image with resized URLs.
4. Days 9 to 10: Turn on React Compiler, remove console calls and fix the leaks found in heap snapshots.
5. Days 11 to 12: Measure again with the same phone and the same steps, and compare with day 1.

The real time depends on how many libraries need updates. Upgrades are usually the slowest step, so check library compatibility first.

Is React Native Slower Than Native?

For most business apps, such as shopping, booking, banking, social and media apps, a well built React Native app feels the same to users as a native app. Problems usually come from how the app is built, not from the framework. The New Architecture, Hermes V1 and native list and animation libraries have narrowed the gap further. Apps with very heavy graphics, real time video processing or complex games may still need native modules or fully native code for those parts. If you are still choosing a framework, see our comparison of Flutter vs React Native, and our guide to improving Flutter app performance.

How AI Helps You Improve React Native Performance

AI coding assistants such as Claude Code, Cursor, GitHub Copilot and Codex can now speed up performance work. They do not replace measuring, but they cut the time between "this screen is slow" and a tested fix. Two React Native specific tools are worth knowing.

• React Native Best Practices agent skills (Callstack): Released on 16 January 2026, this set of 27 skills teaches AI agents React Native performance patterns. It covers avoiding extra renders with memoization and React Compiler, moving heavy work off the JavaScript thread, native profiling on iOS and Android, app size, R8 code shrinking and Hermes settings. The skills are based on Callstack's Ultimate Guide to React Native Optimization and work with agents such as Claude Code, Cursor, Codex and Opencode.
• Expo MCP server: This connects AI assistants to your Expo project. It can search the official Expo docs, check EAS build logs and failures, and, with a local dev server and simulator on SDK 54 or later, take screenshots, tap through flows, inspect views and collect logs. Since 26 May 2026 it is also available on Expo's free plan, with a monthly usage limit.

Sources: Callstack announcement; Expo blog, Expo MCP server; Expo changelog, May 2026.

Where AI Helps and Where a Developer Must Check

Example Prompts to Try

• "Here is a React Profiler export from a release build. Which components render most often, and why?"
• "List every ScrollView in this project that renders more than 20 items and suggest a FlashList version."
• "Find useEffect hooks in this folder that add listeners or timers without cleanup."
• "Check our package.json and list libraries that do not support the New Architecture, with maintained alternatives."
• "Set up a release build size report for Android and iOS, and explain the five largest items."

Know the Limits

AI suggestions can look right and still be wrong. In the 2025 Stack Overflow survey of over 49,000 developers, 46% said they do not trust the accuracy of AI tool output, and 45% said fixing AI generated code takes a lot of time. A 2025 Veracode test of more than 100 AI models found security flaws in about 45% of the code they generated. So use AI to find problems and draft fixes faster, then let an experienced developer measure, review and test before anything ships.

Sources: Stack Overflow, 2025 Developer Survey; Veracode, 2025 GenAI Code Security Report.

Making AI Features in Your App Fast

If your app itself uses AI, such as a chatbot, search or image tools, the same rules apply. Stream long answers so users see text right away, run model calls in the background instead of blocking the screen, cache repeated results, and show clear loading states. Heavy model work belongs on your server or in native code, not on the JavaScript thread. See our AI and ML development services and how to hire AI developers.

When to Get Expert Help

Bring in an experienced React Native developer when upgrades are blocked by old libraries, when performance problems only appear on some devices, or when your team is busy with features. At Expert App Devs, our React Native developers audit release builds, plan upgrades to the New Architecture and fix list, image, animation and memory problems.

• Hire React Native developers
• Add a QA engineer to test on real devices
• Mobile app development services
• Case studies

You can test our work first with the 40 hour free trial, for example by asking a developer to profile one slow screen. New clients can also check our offers. If your team already uses AI coding tools, our guide on AI coding tools vs hiring developers explains where human review still matters.

Frequently Asked Questions

How can I improve React Native app performance?

Measure in a release build first. Then upgrade to a current React Native version on the New Architecture with Hermes V1, turn on React Compiler, use FlashList or a tuned FlatList for long lists, cache and resize images, run animations with the native driver or Reanimated, fix memory leaks and remove console calls in production.

Does the New Architecture make React Native faster?

It removes the old asynchronous bridge and lets JavaScript talk to native code directly through JSI, which helps with layout, native modules and smooth interactions. Since React Native 0.82 it is the only runtime. The size of the gain depends on your app, so measure before and after.

Should I still turn on Hermes manually?

No. Hermes has been the default since React Native 0.70, and Hermes V1 is the default from 0.84. Apps already on Hermes get Hermes V1 with no configuration changes.

Is Flipper still used for React Native debugging?

No. React Native DevTools, released in 0.76, replaced Flipper and the older debuggers. Since 0.83 it includes Network and Performance panels. Use Android Studio and Xcode for native debugging.

Should I use FlatList or FlashList?

FlatList is fine for many lists if you tune it with getItemLayout, stable keys and simple rows. For large or complex lists, FlashList v2 or Legend List usually scroll more smoothly. FlashList v2 showed up to 50% less blank area than v1 in Shopify's tests.

Does React Compiler replace useMemo and useCallback?

For most new code, yes. React Compiler adds memoization automatically at build time. The React team recommends keeping existing useMemo and useCallback calls in older code, and using them as an escape hatch when you need exact control.

How do I reduce React Native app size?

Ship an Android App Bundle, turn on R8 for release builds, remove unused libraries and assets, compress images and fonts, and stay on a current version. From 0.84, iOS builds no longer include legacy architecture code by default.

How do I speed up React Native builds?

Build only the active Android architecture during development with the --active-arch-only flag, turn on Gradle configuration caching, use ccache, and use the precompiled iOS binaries that are on by default from 0.84. The React Native docs say building one ABI can cut native build time by about 75%.

How do I optimize a React Native app for Fire TV or Android TV?

Track time to first frame, time to fully drawn, memory and fluidity. Keep focus changes light, virtualize rows of tiles, request images at their display size and test on the real TV device. Amazon's Vega docs cover these areas for Fire TV.

Can AI tools improve React Native app performance?

Yes, as helpers. AI assistants can read profiler results, find extra renders and missing cleanups, plan upgrades and convert lists and image code. Callstack's React Native agent skills and the Expo MCP server give them React Native specific knowledge and tools. A developer must still measure in a release build and review every change.

Why is my React Native app slow only on Android?

Android devices range from flagship to very low end, so problems such as heavy lists, large images and busy JavaScript threads show up there first. Test on a mid range or low end Android phone in a release build, and use Android Studio Profiler and Android vitals to find the cause.

Conclusion

React Native performance starts with being current. The New Architecture, Hermes V1, React Native DevTools and React Compiler fix many problems that older apps had to work around by hand. After that, measure in a release build, fix the biggest issue first, and keep lists, images, animations and memory under control. If you want a second pair of eyes on a slow app, talk to our experts.