refetchInterval and rerenders?

[tamis-laan]

I have a simple hook based on react query:

// Check if loggedin
export function useLoggedin(options) {
	// Create query
	return useQuery('loggedin', validateToken, {
		staleTime: 10*1000,
		refetchInterval:1000,
		...options
	})
}

The function validateToken checks secure storage and checks if there is a token. Every 1 second this check is performed. I noticed however that everything in my app is re-rendered on each refetch. Why is this? The content of the token does not change. How do I get around this?

[TkDodo]

useQuery returns status fields, like isFetching. Those do change on every fetch, so your component rerenders.
In v3, you can set notifyOnChangeProps: 'tracked' to only rerender when a field you're using changes. In v4, this will be the default. So if you only use data, and that doesn't change, there's no rerender.

[tamis-laan]

Cool I updated to 3.39.1 and set the default options to:

const queryClient = new QueryClient({ defaultOptions: {
  queries: {
    notifyOnChangeProps:['tracked']
  }
} })

However nothing loads now...

same thing for: notifyOnChangeProps: 'tracked'

[TkDodo]

Can't really do much with that information. Can you show a codesandbox reproduction please