refactor: move prevent set state in render logic to useIsFetching hook

Author: boschni

src/core/queryCache.ts

@@ -268,17 +268,7 @@ export class QueryCache {
 
       if (!this.config.frozen) {
         this.queries[queryHash] = query
-
-        if (isServer) {
-          this.notifyGlobalListeners()
-        } else {
-          // Here, we setTimeout so as to not trigger
-          // any setState's in parent components in the
-          // middle of the render phase.
-          setTimeout(() => {
-            this.notifyGlobalListeners()
-          })
-        }
+        this.notifyGlobalListeners()
       }
     }
 

src/react/tests/useIsFetching.test.tsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 
 import { useQuery, useIsFetching } from '../index'
 import { sleep, queryKey } from './utils'
+import { useQueryCache } from '../ReactQueryCacheProvider'
 
 describe('useIsFetching', () => {
   // See https://github.com/tannerlinsley/react-query/issues/105
@@ -40,4 +41,46 @@ describe('useIsFetching', () => {
     await waitFor(() => rendered.getByText('isFetching: 1'))
     await waitFor(() => rendered.getByText('isFetching: 0'))
   })
+
+  it('should not update state while rendering', async () => {
+    const spy = jest.spyOn(console, 'error')
+
+    const key1 = queryKey()
+    const key2 = queryKey()
+    const key3 = queryKey()
+
+    const isFetchings: number[] = []
+
+    function Child() {
+      const isFetching = useIsFetching()
+      isFetchings.push(isFetching)
+      return null
+    }
+
+    function Page() {
+      const queryCache = useQueryCache()
+
+      useQuery(key1, async () => {
+        await sleep(100)
+        return 'data'
+      })
+
+      useQuery(key2, async () => {
+        await sleep(10)
+        return 'data'
+      })
+
+      if (isFetchings.length === 1) {
+        queryCache.setQueryData(key3, () => 'data')
+      }
+
+      return <Child />
+    }
+
+    render(<Page />)
+    await waitFor(() => expect(isFetchings).toEqual([2, 2, 1, 1, 1, 0]))
+    expect(spy.mock.calls[0]?.[0] ?? '').not.toMatch('setState')
+
+    spy.mockRestore()
+  })
 })

src/react/useIsFetching.ts

@@ -1,23 +1,19 @@
 import React from 'react'
 
-import { useRerenderer, useGetLatest } from './utils'
 import { useQueryCache } from './ReactQueryCacheProvider'
 
 export function useIsFetching(): number {
   const queryCache = useQueryCache()
-  const rerender = useRerenderer()
-  const isFetching = queryCache.isFetching
 
-  const getIsFetching = useGetLatest(isFetching)
+  const [isFetching, setIsFetching] = React.useState(queryCache.isFetching)
 
   React.useEffect(
     () =>
       queryCache.subscribe(newCache => {
-        if (getIsFetching() !== newCache.isFetching) {
-          rerender()
-        }
+        // scheduele microtask to prevent updating state while rendering
+        Promise.resolve().then(() => setIsFetching(newCache.isFetching))
       }),
-    [getIsFetching, queryCache, rerender]
+    [queryCache]
   )
 
   return isFetching