In some situations, including performance concerns, you may want to stop re-renders when a React Native screen gets out of focus. To achieve this we can use `useFocusEffect` from `@react-navigation/native` together with the `notifyOnChangeProps` query option.

This custom hook provides a `notifyOnChangeProps` option that will return an empty array whenever a screen goes out of focus - effectively stopping any re-renders on that scenario. Whenever the screens gets in focus again, the behavior goes back to normal.

import React from 'react'

import { NotifyOnChangeProps } from '@tanstack/query-core'

import { useFocusEffect } from '@react-navigation/native'

export function useFocusNotifyOnChangeProps(notifyOnChangeProps?: NotifyOnChangeProps) {

const focusedRef = React.useRef(true)

useFocusEffect(

React.useCallback(() => {

focusedRef.current = true

return () => {

focusedRef.current = false

}

}, [])

)

return () => {

if (!focusedRef.current) {

return []

}

if (typeof notifyOnChangeProps === 'function') {

return notifyOnChangeProps()

}

return notifyOnChangeProps.current

}

}

In the above code, `useFocusEffect` is used to change the value of a reference that the callback will use as a condition.

The argument is wrapped in a reference to also guarantee that the returned callback always keeps the same reference.

Example usage:

function MyComponent() {

const notifyOnChangeProps = useFocusNotifyOnChangeProps();

const { dataUpdatedAt } = useQuery({

queryKey: ['myKey'],

queryFn: async () => {

const response = await fetch('https://api.github.com/repos/tannerlinsley/react-query');

return response.json();

},

notifyOnChangeProps,

});

return <div>DataUpdatedAt: {dataUpdatedAt}</div>;

};