React Native Setting a timer for a long period of time warning

[vikrantnegi]

Describe the bug
I'm using react query in react native to fetch the geolocation coordinates. It iseems to be working fine but giving a warning in the console Setting a timer for a long period of time.

To Reproduce
Steps to reproduce the behavior:

1. Create React Native CLI Project
2. Install react-native-geolocation-service
3. create a react query for fetching location

Expected behavior
When I try to mimic the react query using custom hooks it doesn't give the timer warning.

Smartphone (please complete the following information):

• Device: Android emulator, Pixel_2_API_29
• OS: macOS Catalina
• "react": "16.13.1",
• "react-native": "0.63.3",
• "react-query": "^2.26.1"

Code:

async function getPosition() {
  const hasLocationPermission = await checkLocationPermission();

  if (!hasLocationPermission) {
    return;
  }

  return new Promise((res, rej) => {
    Geolocation.getCurrentPosition(res, rej);
  });
}

const App = () => {
  const info = useQuery('pos', getPosition);
  console.log({info});
}

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) 

[dominictwlee]

@vikrantnegi Yeah, this has been a longstanding issue with React-Native for a while now. you can check out their recommendations at:
facebook/react-native#12981 (comment)

In the case of react-query, I believe this is related to the default cacheTime of 5 minutes. I don't think it should affect your app all that much, given that the garbage collection occurs if you have the app in the foreground anyway.

[vikrantnegi]

@dominictwlee I see. As long as it doesn't affect the app performance I'm fine with it. Thanks for the info.

[dan-lee]

I get that this is a react-native problem, but can you guys suggest how to disable the warning specifically for react-query? It spams my logs with huge stack traces and the real logs get buried in there.

[dominictwlee]

I get that this is a react-native problem, but can you guys suggest how to disable the warning specifically for react-query? It spams my logs with huge stack traces and the real logs get buried in there.

console.ignoredYellowBox = ['Setting a timer'];

[dan-lee]

@dominictwlee Thanks, but that disables it entirely. I wanted to specifically exclude react-query, because this warning could be helpful in other places.

[dominictwlee]

@dominictwlee Thanks, but that disables it entirely. I wanted to specifically exclude react-query, because this warning could be helpful in other places.

Don't believe that's possible, since it's a react native warning. Nothing you can do on the react-query side.

[YajanaRao]

I got this warning when I tried to set cacheTime to 1800000. Will it work irrespective of the warning?

[dominictwlee]

I got this warning when I tried to set cacheTime to 1800000. Will it work irrespective of the warning?

Yep you should be fine. For more details read:
facebook/react-native#12981 (comment)

[velopert]

From RN v0.63, Use LogBox instead of console.ignoredYellowBox

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

[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