fix(useIsFetching): account for fetches happening in the same render cycle

src/react/tests/useIsFetching.test.tsx

@@ -100,7 +100,7 @@ describe('useIsFetching', () => {
     }
 
     renderWithClient(queryClient, <Page />)
-    await waitFor(() => expect(isFetchings).toEqual([0, 0, 1, 2, 1, 0]))
+    await waitFor(() => expect(isFetchings).toEqual([0, 1, 1, 2, 1, 0]))
     expect(consoleMock).not.toHaveBeenCalled()
     expect(consoleMock.mock.calls[0]?.[0] ?? '').not.toMatch('setState')
 
@@ -159,4 +159,29 @@ describe('useIsFetching', () => {
     await sleep(100)
     expect(isFetchings).toEqual([0, 0, 1, 0])
   })
+
+  it('should show the correct fetching state when mounted after a query', async () => {
+    const queryClient = new QueryClient()
+    const key = queryKey()
+
+    function Page() {
+      useQuery(key, async () => {
+        await sleep(10)
+        return 'test'
+      })
+
+      const isFetching = useIsFetching()
+
+      return (
+        <div>
+          <div>isFetching: {isFetching}</div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await rendered.findByText('isFetching: 1')
+    await rendered.findByText('isFetching: 0')
+  })
 })

src/react/useIsFetching.ts

@@ -3,8 +3,21 @@ import React from 'react'
 import { notifyManager } from '../core/notifyManager'
 import { QueryKey } from '../core/types'
 import { parseFilterArgs, QueryFilters } from '../core/utils'
+import { QueryClient } from '../core'
 import { useQueryClient } from './QueryClientProvider'
 
+const checkIsFetching = (
+  queryClient: QueryClient,
+  filters: QueryFilters,
+  isFetching: number,
+  setIsFetching: React.Dispatch<React.SetStateAction<number>>
+) => {
+  const newIsFetching = queryClient.isFetching(filters)
+  if (isFetching !== newIsFetching) {
+    setIsFetching(newIsFetching)
+  }
+}
+
 export function useIsFetching(filters?: QueryFilters): number
 export function useIsFetching(
   queryKey?: QueryKey,
@@ -31,13 +44,22 @@ export function useIsFetching(
   React.useEffect(() => {
     mountedRef.current = true
 
+    checkIsFetching(
+      queryClient,
+      filtersRef.current,
+      isFetchingRef.current,
+      setIsFetching
+    )
+
     const unsubscribe = queryClient.getQueryCache().subscribe(
       notifyManager.batchCalls(() => {
         if (mountedRef.current) {
-          const newIsFetching = queryClient.isFetching(filtersRef.current)
-          if (isFetchingRef.current !== newIsFetching) {
-            setIsFetching(newIsFetching)
-          }
+          checkIsFetching(
+            queryClient,
+            filtersRef.current,
+            isFetchingRef.current,
+            setIsFetching
+          )
         }
       })
     )