fix(query-core): infinite re-renders in useQueries (#9639)

* test(useQueries): add test for preventing infinite re-renders

* fix(query-core): resolve infinite re-renders in queriesObserver

* style(useQueries): remove unnecessary comments

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: m2na7

packages/query-core/src/queriesObserver.ts

@@ -118,29 +118,30 @@ export class QueriesObserver<
         observer.getCurrentResult(),
       )
 
+      const hasLengthChange = prevObservers.length !== newObservers.length
       const hasIndexChange = newObservers.some(
         (observer, index) => observer !== prevObservers[index],
       )
+      const hasStructuralChange = hasLengthChange || hasIndexChange
 
-      const hasResultChange =
-        prevObservers.length === newObservers.length && !hasIndexChange
-          ? newResult.some((result, index) => {
-              const prev = this.#result[index]
-              return !prev || !shallowEqualObjects(result, prev)
-            })
-          : true
+      const hasResultChange = hasStructuralChange
+        ? true
+        : newResult.some((result, index) => {
+            const prev = this.#result[index]
+            return !prev || !shallowEqualObjects(result, prev)
+          })
 
-      if (!hasIndexChange && !hasResultChange) return
+      if (!hasStructuralChange && !hasResultChange) return
 
-      if (hasIndexChange) {
+      if (hasStructuralChange) {
         this.#observers = newObservers
       }
 
       this.#result = newResult
 
       if (!this.hasListeners()) return
 
-      if (hasIndexChange) {
+      if (hasStructuralChange) {
         difference(prevObservers, newObservers).forEach((observer) => {
           observer.destroy()
         })

packages/react-query/src/__tests__/useQueries.test.tsx

@@ -1741,4 +1741,74 @@ describe('useQueries', () => {
     // still no extra calls to combine
     expect(spy).toHaveBeenCalledTimes(3)
   })
+
+  it('should not cause infinite re-renders when removing last query', async () => {
+    let renderCount = 0
+
+    function Page() {
+      const [queries, setQueries] = React.useState([
+        {
+          queryKey: ['query1'],
+          queryFn: () => 'data1',
+        },
+        {
+          queryKey: ['query2'],
+          queryFn: () => 'data2',
+        },
+      ])
+      renderCount++
+
+      const result = useQueries({ queries })
+
+      return (
+        <div>
+          <div data-testid="render-count">renders: {renderCount}</div>
+          <div data-testid="query-count">queries: {result.length}</div>
+          <button
+            onClick={() => {
+              setQueries([
+                {
+                  queryKey: ['query1'],
+                  queryFn: () => 'data1',
+                },
+              ])
+            }}
+          >
+            remove last
+          </button>
+          <button
+            onClick={() => {
+              setQueries([
+                {
+                  queryKey: ['query2'],
+                  queryFn: () => 'data2',
+                },
+              ])
+            }}
+          >
+            remove first
+          </button>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await vi.advanceTimersByTimeAsync(0)
+    renderCount = 0
+
+    fireEvent.click(rendered.getByRole('button', { name: /remove last/i }))
+    await vi.advanceTimersByTimeAsync(100)
+
+    expect(renderCount).toBeLessThan(10)
+    expect(rendered.getByTestId('query-count').textContent).toBe('queries: 1')
+
+    renderCount = 0
+
+    fireEvent.click(rendered.getByRole('button', { name: /remove first/i }))
+    await vi.advanceTimersByTimeAsync(100)
+
+    expect(renderCount).toBeLessThan(10)
+    expect(rendered.getByTestId('query-count').textContent).toBe('queries: 1')
+  })
 })