[React Native] How to pause polling without re-render when a React Native screen gets out of focus

[mk-nickyang]

Hi there, we have a couple screens in our React Native app that poll data regularly, like

useQuery({
  queryKey: ['todos'],
  queryFn: async () => {
    const res = await axios.get('/api/data')
    return res.data
  },
  // Refetch the data every 30 seconds
  refetchInterval: 30_000,
})

and we would like to temporarily pause it when the screen gets out of focus, to avoid unnecessary network calls and screen updates (context: In React Native with react-navigation, when user navigates from screen A to screen B, screen A will remain mounted on the stack, it won't unmount, see more here).

To achieve this, we can use enabled option + the useIsFocused hook , like

const isFocused = useIsFocused();

useQuery({
  queryKey: ['todos'],
  queryFn: async () => {
    const res = await axios.get('/api/data')
    return res.data
  },
  enabled: isFocused,
  // Refetch the data every 30 seconds
  refetchInterval: 30_000,
})

It works great, but the problem is on the performance side. As @ferrannp well explained in #5588 (reply in thread),

The problem is that useIsFocused gets triggered when you blur a screen (and focus), causing a re-render that is very heavy on React Native (nothing should happen on navigation). That is why there is a warning in the docs:

Note that using this hook triggers a re-render for the screen when it changes focus. This might cause lags during the animation if your screen is heavy

We thought about using useFocusEffect to tackle this issue, but unfortunately there is no function like disable or enable returned from useQuery where we can potentially do

const { enable, disable } = useQuery({
  queryKey: ['todos'],
  queryFn: async () => {
    const res = await axios.get('/api/data')
    return res.data
  },
  // Refetch the data every 30 seconds
  refetchInterval: 30_000,
})

useFocusEffect(
  React.useCallback(() => {
    // Enable query when screen gets in focus
    enable();

    // Disable query when screen goes out of focus
    return () => disable();
  }, [])
);

So, I was just wondering if anyone has any ideas on how to pause query polling without causing a re-render when a React Native screen gets out of focus? Thanks in advance 🙏

[TkDodo]

isn't that the reason we allowed notifyOnChangeProps to take a function?

• `notifyOnChangeProps` to also accept a callback #5588
• feat: add new function type to notifyOnChangeProps #5734

?

[mk-nickyang]

I assume you mean useFocusEffect? That's correct, useFocusEffect doesn't trigger a re-render when screen focus changes.

The useIsFocused hook is the one who does trigger re-render. Here's the React Navigation documentation page comparing focus event listener, useFocusEffect and useIsFocused if you are interested

The useIsFocused hook will cause our component to re-render when we focus and unfocus a screen. Using this hook component may introduce unnecessary component re-renders as a screen comes in and out of focus. This could cause issues depending on the type of action we're calling on focusing. Hence we recommend to use this hook only if you need to trigger a re-render. For side-effects such as subscribing to events or fetching data, use the methods described above (focus event listener and useFocusEffect).

[mk-nickyang]

useFocusEffect doesn't trigger a re-render when screen focus changes

This is also where the idea from the original post above comes from

We thought about using useFocusEffect to tackle this issue, but unfortunately there is no function like disable or enable returned from useQuery where we can potentially do

const { enable, disable } = useQuery({
  queryKey: ['todos'],
  queryFn: async () => {
    const res = await axios.get('/api/data')
    return res.data
  },
  // Refetch the data every 30 seconds
  refetchInterval: 30_000,
})

useFocusEffect(
  React.useCallback(() => {
    // Enable query when screen gets in focus
    enable();

    // Disable query when screen goes out of focus
    return () => disable();
  }, [])
);

If it's doable, we can disable/enable the query/polling without any re-render

[mk-nickyang]

Hi @TkDodo, just want to circle back to this one to see if you have any new ideas 🙏.

I made an example in web earlier to mimic this React Native issue, please see the link below
https://codesandbox.io/s/rn-polling-demo-cwm82r?file=/src/App.js

Basically we are looking for a way to pause & resume the polling without causing <HomeTab> re-render.

We tried to set refetchInterval as a function, it does stop the polling, but the polling can't be resumed when we come back to the 'Home' tab, see here.

So we are running out of ideas 😅. Or do you think re-render is a MUST to achieve this?

[TkDodo]

but the polling can't be resumed when we come back to the 'Home' tab

hmm, have you tried calling refetchQueries on the query that should poll manually once when you go back to the home tab? I'm thinking that this should re-trigger the interval function, and it works in this forked sandbox:

https://codesandbox.io/s/rn-polling-demo-forked-yzvwzk?file=/src/App.js

Another idea I had: polling stops if the app is seen as not focussed, unless you turn on refetchIntervalInBackground: true. This is determined by the global focusManager. Now you can set your own focus event handling there and set it to focused: false manually if you switch away to a different tab where no polling should occur. Not sure if that's helpful / doable, but it's a possibility. See the forked sandbox here:

https://codesandbox.io/s/rn-polling-demo-forked-hd5pfm?file=/src/App.js

[mk-nickyang]

Appreciate for your reply 🙏 Just tried both ideas

calling refetchQueries when go back to the home tab

Think this does work, for some reason I never thought using refetch to re-trigger the interval function 😅 Brilliant idea!

The only downside I can think of is just when user constantly switches between tabs, query will be refetched a lot. But I guess we can check the diff between Date.now() - dataUpdatedAt and refetchInterval, to force this manual refetch to also respect refetchInterval? What do you think 🤔

use focusManager

This one also works for the example above. But i guess since focusManager is a global thing instead of on the observer level, when we set focused: false, it will also stop other queries polling from other tabs right? (assuming there are other polling queries)

[TkDodo]

to force this manual refetch to also respect refetchInterval

I think what would happen is that since the page doesn't re-render, the interval doesn't re-start if you don't refetch. You need some "signal" to resume the interval: either a re-render of the component, or a refetch.

it will also stop other queries polling from other tabs right?

yes, it would.

[mk-nickyang]

Yeah right, make sense. Thanks again for all the help so far, will close this discussion now 🙏