Image Load Races in React Native – Fix It in One Line

When users tap quickly between images, your preview can flicker, hide the spinner at the wrong time, or even show the wrong photo. That’s a classic race condition during image loading. Here’s the core fix in one line—and why it works.

The pro…


This content originally appeared on DEV Community and was authored by Cathy Lai

When users tap quickly between images, your preview can flicker, hide the spinner at the wrong time, or even show the wrong photo. That’s a classic race condition during image loading. Here’s the core fix in one line—and why it works.

The problem

You show a full-screen preview of an image in a modal (or a floating box). A user taps Image A, it starts loading. Before it finishes, they tap Image B. If Image A completes late, its onLoad/onLoadEnd can still fire and mutate state that now “belongs” to Image B—hiding the spinner too early or causing flicker.

Why it happens

React Native’s Image kicks off a native request as soon as it renders with source={{ uri }}. If you keep the same Image instance mounted while swapping the URI, late callbacks from the previous load can still arrive and update your UI state.

The key solution: “latest selection wins” via force-remount

Force the preview Image to remount whenever the selection changes by adding a key tied to the selected image’s ID. When a new image is picked, the old preview unmounts—its native request is dropped and its callbacks won’t run—so only the current Image controls the spinner.

Fix 

<Modal
  visible={modalVisible}
  onRequestClose={() => setModalVisible(false)}
>
    <View style={styles.modalContent}>
      <Image
        key={image?.id || "placeholder"} /// <-- FIX : latest selection wins 
        source={{ uri: image?.urls?.full || "https://placehold.co/600x400" }}
        ...
        onLoadStart={() => setModalLoading(true)}
        onLoadEnd={() => setModalLoading(false)}
      />
    </View>

  {modalLoading && (
    <View style={styles.skeleton}>
      <ActivityIndicator size="large" />
      <Text style={styles.skeletonText}>Loading...</Text>
    </View>
  )}
</Modal>

Deep dive: what the Image actually does

Yes. React Native’s Image starts a native image request (Fresco/Glide on Android, SDWebImage/URLSession on iOS) when you render it with a source={{ uri }}. It’s not the JS fetch() API, so there’s no AbortController you can call from JS.

What you can rely on:

  • Unmount/source change cancels natively: If you unmount the Image or change its key/source, the native layer cancels/drops the old request and callbacks. That’s why using key={image.id} is effective against races.
  • No JS abort: You can’t abort a still-mounted Image request from JS; instead, remount or ignore late events (token guard).
  • Prefetch alternative: Image.prefetch(url) can warm the cache, but it also can’t be aborted; you still need a “latest selection wins” guard.

If you need more control, libraries like expo-image/FastImage improve caching and cancel on unmount/source change as well, but they still don’t expose a JS abort handle for an in-place load.

Takeaway

For image previews where users can rapidly change selections, make the latest selection win by remounting the preview Image with key={selectedImage.id} and drive the loader off onLoadStart/onLoadEnd. This prevents late callbacks from earlier loads from ever touching your current UI state.


This content originally appeared on DEV Community and was authored by Cathy Lai


Print Share Comment Cite Upload Translate Updates
APA

Cathy Lai | Sciencx (2025-11-12T22:38:42+00:00) Image Load Races in React Native – Fix It in One Line. Retrieved from https://www.scien.cx/2025/11/12/image-load-races-in-react-native-fix-it-in-one-line/

MLA
" » Image Load Races in React Native – Fix It in One Line." Cathy Lai | Sciencx - Wednesday November 12, 2025, https://www.scien.cx/2025/11/12/image-load-races-in-react-native-fix-it-in-one-line/
HARVARD
Cathy Lai | Sciencx Wednesday November 12, 2025 » Image Load Races in React Native – Fix It in One Line., viewed ,<https://www.scien.cx/2025/11/12/image-load-races-in-react-native-fix-it-in-one-line/>
VANCOUVER
Cathy Lai | Sciencx - » Image Load Races in React Native – Fix It in One Line. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/11/12/image-load-races-in-react-native-fix-it-in-one-line/
CHICAGO
" » Image Load Races in React Native – Fix It in One Line." Cathy Lai | Sciencx - Accessed . https://www.scien.cx/2025/11/12/image-load-races-in-react-native-fix-it-in-one-line/
IEEE
" » Image Load Races in React Native – Fix It in One Line." Cathy Lai | Sciencx [Online]. Available: https://www.scien.cx/2025/11/12/image-load-races-in-react-native-fix-it-in-one-line/. [Accessed: ]
rf:citation
» Image Load Races in React Native – Fix It in One Line | Cathy Lai | Sciencx | https://www.scien.cx/2025/11/12/image-load-races-in-react-native-fix-it-in-one-line/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts