fix(perf): improve long running task performance in query core (#8107)

* fix: improve long running task performance in query core

This addresses two hot spots we have noticed
on a large scale enterprise app when profiling
with chrome. These changes help to cut down
on long running tasks when there are many query
calls on the page

* refactor: remove two more arrays to be more efficient

* refactor: remove queryObserver improvement from PR

* refactor: packages/query-core/src/queryObserver.ts remove

---------

Co-authored-by: davidaghassi <[email protected]>
Co-authored-by: Dominik Dorfmeister <[email protected]>

Author: 3 people

packages/query-core/src/queriesObserver.ts

@@ -207,59 +207,43 @@ export class QueriesObserver<
   #findMatchingObservers(
     queries: Array<QueryObserverOptions>,
   ): Array<QueryObserverMatch> {
-    const prevObservers = this.#observers
     const prevObserversMap = new Map(
-      prevObservers.map((observer) => [observer.options.queryHash, observer]),
+      this.#observers.map((observer) => [observer.options.queryHash, observer]),
     )
 
-    const defaultedQueryOptions = queries.map((options) =>
-      this.#client.defaultQueryOptions(options),
-    )
-
-    const matchingObservers: Array<QueryObserverMatch> =
-      defaultedQueryOptions.flatMap((defaultedOptions) => {
-        const match = prevObserversMap.get(defaultedOptions.queryHash)
-        if (match != null) {
-          return [{ defaultedQueryOptions: defaultedOptions, observer: match }]
-        }
-        return []
-      })
-
-    const matchedQueryHashes = new Set(
-      matchingObservers.map((match) => match.defaultedQueryOptions.queryHash),
-    )
-    const unmatchedQueries = defaultedQueryOptions.filter(
-      (defaultedOptions) => !matchedQueryHashes.has(defaultedOptions.queryHash),
-    )
+    const observers: Array<QueryObserverMatch> = []
 
-    const getObserver = (options: QueryObserverOptions): QueryObserver => {
+    queries.forEach((options) => {
       const defaultedOptions = this.#client.defaultQueryOptions(options)
-      const currentObserver = this.#observers.find(
-        (o) => o.options.queryHash === defaultedOptions.queryHash,
-      )
+      const match = prevObserversMap.get(defaultedOptions.queryHash)
+      if (match) {
+        observers.push({
+          defaultedQueryOptions: defaultedOptions,
+          observer: match,
+        })
+      } else {
+        const existingObserver = this.#observers.find(
+          (o) => o.options.queryHash === defaultedOptions.queryHash,
+        )
+        observers.push({
+          defaultedQueryOptions: defaultedOptions,
+          observer:
+            existingObserver ??
+            new QueryObserver(this.#client, defaultedOptions),
+        })
+      }
+    })
+
+    return observers.sort((a, b) => {
       return (
-        currentObserver ?? new QueryObserver(this.#client, defaultedOptions)
+        queries.findIndex(
+          (q) => q.queryHash === a.defaultedQueryOptions.queryHash,
+        ) -
+        queries.findIndex(
+          (q) => q.queryHash === b.defaultedQueryOptions.queryHash,
+        )
       )
-    }
-
-    const newOrReusedObservers: Array<QueryObserverMatch> =
-      unmatchedQueries.map((options) => {
-        return {
-          defaultedQueryOptions: options,
-          observer: getObserver(options),
-        }
-      })
-
-    const sortMatchesByOrderOfQueries = (
-      a: QueryObserverMatch,
-      b: QueryObserverMatch,
-    ): number =>
-      defaultedQueryOptions.indexOf(a.defaultedQueryOptions) -
-      defaultedQueryOptions.indexOf(b.defaultedQueryOptions)
-
-    return matchingObservers
-      .concat(newOrReusedObservers)
-      .sort(sortMatchesByOrderOfQueries)
+    })
   }
 
   #onUpdate(observer: QueryObserver, result: QueryObserverResult): void {