useQuery select function is called twice

[TomPradat]

In my application, using version 5.45.0, I get this weird thing where sometimes the select function is called twice.

Here are some takeaways from my debugging session :

1. The select function is defined out of React scope, so it is not the function that changes.
2. When the select is called for the second time, the data argument is the same one (I tested with strict equality ===) as during the previous call.
3. When memoizing the select function, the problem disappears, which supports the previous point.

I've noticed that in https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L470, the prevResultState.data is undefined when I have the problem, which seems to be the cause of the new call to select.

I tried to reproduce the bug in a codesandbox but unfortunately failed.

Could this be a bug or is there something obvious that I am missing?

[TkDodo]

1. and 3. kind of contradict each other. You wouldn't need to memoize a function that is already stable because it's defined outside of react.

[TomPradat]

I mean "memoize" by hand (without using react helpers). I know it doesn't make much sense. 1. should avoid you having to do 3.

[TkDodo]

1. should avoid you having to do 3.

exactly. there isn't much I can do I'm afraid without a minimal reproduction

[TomPradat]

I know yes. I'll try again to reproduce it

[nimo23]

In my case, the select statement is also called multiple times. not only twice but always 4 times:

const { data: user, dataUpdatedAt, error, errorUpdatedAt, isFetching } = useQuery({
		queryKey: ["user", username],
		queryFn: () => fetchUser(username),
		refetchInterval: 1000 * 60 * 3,
		enabled: !!(username),
		retry: 1,
		select: (user: User): UserWithTask => {
			console.log("select is called");
			return {
				user,
				tasks: getTasks(user)
			};
		},
		refetchOnMount: true,
		refetchOnWindowFocus: false,
		refetchOnReconnect: true,
});

Why is select called multiple times? How can I avoid this? Shouldn't the tansstack query be responsible for calling select only once after queryFn has returned successfully?

[nimo23]

Ok, according to https://tanstack.com/query/v5/docs/framework/react/guides/render-optimizations#memoization and #7514, we should use something like:

select: useMemo(..) // useCallback() will throw an exception and cannot be used

Why doesn't Tanstack Query memoize the select-function internally? I mean, queryFn doesn't need to be wrapped by useMemo/useCallback either. Shouldn't that also be the case with select? What's the point if select isn't memoized by default?