Warning from react-native on android about long setTimeout

[adamjuhasz]

Warning

When running react-query with react-native on Android the following warning is emitted. I assume there needs to be a smarter timeout strategy with react-native but not sure what the best solution is.

• Set a lower timeout?
• Use another timeout library that connects to native solution?

Warning:
Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground. See https://github.com/facebook/react-native/issues/12981 for more info. (Saw setTimeout with duration 300000ms)

Current Workaround:

Add the following code to suppress the warning

import {YellowBox} from 'react-native';

const App = () => {
  //...
  useEffect(() => {
    YellowBox.ignoreWarnings(['Setting a timer']);
  }, []);
  //...
}

[tannerlinsley]

Interesting. I honestly didn't know this about React Native. I'll look into some solutions here.

[tannerlinsley]

Preliminary searches are showing that this is a long-running issue with timers on android and that the best solution during all of this time has either been

• setting the timers to be within the limits to not set off the warning (you could globally configure the cacheTime in React Query to be lower)
• replacing the timer implementation in React Native on Android with a custom timer implementation that works in the background better
• suppressing the warning (as you outlined above)

IMO, suppressing the warning would be fine, since it is just a cache and not a critical operational piece of the app. If the cache doesn't get cleared, then the data will remain in memory until the app is closed and reopened. Not a big deal. And if it does become a big deal, then you have other options.

[adamjuhasz]

Agreed, do you want me to close this?

I could also open a PR to add documentation around cacheTime to indicate RN Android behavior if you want that, or is that to platform specific?

[tannerlinsley]

I would be okay if you wanted to PR a new section (near the bottom, but before the API docs) about using React Query with React Native. If there is anything else in the docs about react-native, consolidate it there, then add your docs there. I think that would be a great addition.

I converted this issue to a discussion when we deemed it was not a core issue with React query, so you can select any of these responses and hit the checkmark to mark it as the right answer to your discussion.

[badsyntax]

Was a PR created to add this info? As someone who's just implemented react query in react native, this warning message is rather unexpected (and the exception thrown is large and scary), especially so as the docs state react-native is pretty much fully supported (imo it isn't, due to this warning). I'd like these docs updated to add info on this issue https://react-query.tanstack.com/react-native

[yepMad]

Sorry to relive this. Is there any current approach to resolve this? Has any documentation been created?

[frankcalise]

Am I understanding this correctly, that on Android the timer won't run in the background, so the cache will just stick around "longer" (until it hits the 5 minute default of being in the foreground)?

[wobsoriano]

YellowBox is now LogBox

import { LogBox } from 'react-native';

LogBox.ignoreLogs(['Setting a timer']);

[MananDesai54]

Warning

When running react-query with react-native on Android the following warning is emitted. I assume there needs to be a smarter timeout strategy with react-native but not sure what the best solution is.

• Set a lower timeout?
• Use another timeout library that connects to native solution?

Warning:
Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground. See https://github.com/facebook/react-native/issues/12981 for more info. (Saw setTimeout with duration 300000ms)

Current Workaround:

Add the following code to suppress the warning

import {YellowBox} from 'react-native';

const App = () => {
  //...
  useEffect(() => {
    YellowBox.ignoreWarnings(['Setting a timer']);
  }, []);
  //...
}

YellowBox is deprecated use LogBox instead

[badsyntax]

I believe this warning will no longer be shown in upcoming RN 0.65, see: facebook/react-native@480dabd & https://github.com/react-native-community/releases/blob/e0636e5aa858320e9695a9c252849d5c97783507/CHANGELOG.md#removed