Add a way to disable a queryObserver using a function [RN]

[flodlc]

Hi there,

I'm currently using React Query with React Native and am facing an issue. Specifically, I'm struggling to find an efficient way to stop observing queries that are not in focus, particularly in the context of stack and tab navigation. The method I've been using involves setting enabled: isFocus, but this approach has known performance issues during navigation.

While I'm aware of notifyOnChangeProps, which partially addresses the issue by preventing re-renders, it doesn't stop queries from refetching. This becomes problematic when multiple tabs are mounted, leading to numerous unnecessary data fetches. Ideally, I would like a feature that allows passing a function in addition to a value for the enabled option, like so:

const isFocused = useRef(true);
const { ... } = useQuery({
  queryKey: ['todos'],
  queryFn: async () => {
    const res = await axios.get('/api/data')
    return res.data
  },
  enabled: () => isFocused.current
})

I've noticed many people trying to tackle this issue but haven't found an optimal solution yet. Any assistance would be greatly appreciated 🙏.

[flodlc]

Hi @tannerlinsley, I would appreciate your help a lot 🙏