useIsFetching stops tracking queries immediately #7559

Describe the bug

I am fetching a list and attempting to get the number of fetches in progress via useIsFetching.

The network part of the data request takes about 2 seconds, and I'm observing when changes are made available in the console because I'm planning on using the information for a spinner.

The console logs from the Toolbar component's isFetching (from the useIsFetching hook) all happen immediately when the request starts. At that time, the logs show 0, 1, then 0 - way before the network request is finished.

Your minimal, reproducible example

Steps to reproduce

TodosPanel.tsx:

//...

export const TodosPanel = () => {

	const { data, isLoading, isFetching } = useQuery({
        queryKey: ["todos"],
        queryFn: async () => await getTodos(),
    });
	
	useEffect(() => {
			console.log(isLoading);
		}, [isLoading]);

	useEffect(() => {
		console.log(isFetching);
	}, [isFetching]);
	
	//...

}

Toolbar.tsx:

//...

export const Toolbar = () => {

	const isFetching = useIsFetching();

	useEffect(() => {
		console.log(isFetching);
	}, [isFetching]);
	
	//...

}

The fetch function itself is as follows:

export const getTodos = async () => {
    return await axiosInstance.get(
        "todos/all",
    );
};

Expected behavior

The console logs of isLoading and isFetching (from useQuery) happen at the same time as each other (as expected), and are true while the network request is happening and then false afterwards.

I would expect useIsFetching to return the correct count at approximately the same time.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: Windows - Browser: Chrome - Version: 125.0.6422.144 (Official Build) (64-bit)

Tanstack Query adapter

None

TanStack Query version

5.40.1

TypeScript version

4.5.2

Additional context

No response