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(),
 )
 
+consthasLengthChange=prevObservers.length!==newObservers.length
 consthasIndexChange=newObservers.some(
 (observer,index)=>observer!==prevObservers[index],
 )
+consthasStructuralChange=hasLengthChange||hasIndexChange
 
-consthasResultChange=
-prevObservers.length===newObservers.length&&!hasIndexChange
- ? newResult.some((result,index)=>{
-constprev=this.#result[index]
-return!prev||!shallowEqualObjects(result,prev)
-})
- : true
+consthasResultChange=hasStructuralChange
+ ? true
+ : newResult.some((result,index)=>{
+constprev=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()=>{
+letrenderCount=0
+
+functionPage(){
+const[queries,setQueries]=React.useState([
+{
+queryKey: ['query1'],
+queryFn: ()=>'data1',
+},
+{
+queryKey: ['query2'],
+queryFn: ()=>'data2',
+},
+])
+renderCount++
+
+constresult=useQueries({ queries })
+
+return(
+<div>
+<divdata-testid="render-count">renders: {renderCount}</div>
+<divdata-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>
+)
+}
+
+constrendered=renderWithClient(queryClient,<Page/>)
+
+awaitvi.advanceTimersByTimeAsync(0)
+renderCount=0
+
+fireEvent.click(rendered.getByRole('button',{name: /removelast/i}))
+awaitvi.advanceTimersByTimeAsync(100)
+
+expect(renderCount).toBeLessThan(10)
+expect(rendered.getByTestId('query-count').textContent).toBe('queries: 1')
+
+renderCount=0
+
+fireEvent.click(rendered.getByRole('button',{name: /removefirst/i}))
+awaitvi.advanceTimersByTimeAsync(100)
+
+expect(renderCount).toBeLessThan(10)
+expect(rendered.getByTestId('query-count').textContent).toBe('queries: 1')
+})
 })