Using useDeferredValue and Suspense unexpectedly shows fallback in React Native ios/android but correctly shows stale state in React/React Native Web

[andrew-wang-polar]

Describe the bug

I'm following the examples from React on using useDeferredValue and Suspense to show a stale state. The correct behavior should be to show the fallback only on the first load, and then on subsequent queries (e.g. when typing in the search box or incrementing counter in the examples) show a stale state until new data is loaded (which then should replace the stale state).

I've included expo snack for React Native and stackblitz for React.

The correct behavior is observed in React (I tested both React 18 + 19) and React Native web. However for React Native android/ios the fallback always shows. For React Native the snack uses React Native 0.77.1. I believe the new architecture is enabled by default, but I have also tried explicitly setting newArchEnabled/isConcurrentRootEnabled like some of these older articles suggest, see here. However, the same behavior is observed.

Your minimal, reproducible example

https://snack.expo.dev/@polarwang/suspense-usedeferredvalue-bug?platform=ios

Steps to reproduce

1. Go to this expo snack for React Native android/ios/web example
2. Go to this stackblitz for React example

Expected behavior

Described above:
The correct behavior should be to show the fallback only on the first load, and then on subsequent queries (e.g. when typing in the search box or incrementing counter in the examples) show a stale state until new data is loaded (which then should replace the stale state)

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: ios, android

Tanstack Query adapter

react-query

TanStack Query version

v5.68.0

TypeScript version

No response

Additional context

No response

[TkDodo]

you’ve set gcTime: 0, and it seems that means react native can’t hold onto the values and also removes them from the screen? Idk, but keeping a larger gcTime makes the issue go away in your reproduction.

[andrew-wang-polar]

@TkDodo thanks for looking, but I don't think gcTime solved this issue. I set it to 60000 and there was no change in behavior. Here is a screen recording where I show the difference in behavior for mobile (ios) vs. web. As you can see mobile shows the suspense boundary after initial load while web shows the stale style.

Screen.Recording.2025-03-29.at.12.33.10.AM.mov

[TkDodo]

oh weird, I swear it was working for me at one time, but those simulators are pretty flaky. Anyways, I’m sorry but I don’t think there’s much I can do here. Seems like an issue with react that you should be able to reproduce without react-query too (e.g. with the use operator)

[andrew-wang-polar]

Yeah after experimenting I think the issue is inherent to react/react native on ios/android, not tanstack query. It might be worth updating this section on the Suspense section of the docs saying that useDeferredValue and startTransition is known to not work on mobile