fix: compareQuery for iterables

Author: TkDodo

packages/nuqs/src/lib/compare.ts

@@ -0,0 +1,33 @@
+export function compareQuery<T extends string | Iterable<string>>(
+  a: T | null,
+  b: T | null
+): boolean {
+  if (a === b) {
+    return true // Referentially stable
+  }
+  if (a === null || b === null) {
+    return false
+  }
+  // we expect either strings or iterables, not a mix of both
+  if (typeof a === 'string' || typeof b === 'string') {
+    return a === b
+  }
+
+  const iterA = a[Symbol.iterator]()
+  const iterB = b[Symbol.iterator]()
+
+  while (true) {
+    const nextA = iterA.next()
+    const nextB = iterB.next()
+
+    if (nextA.done && nextB.done) {
+      return true // both ended at the same time
+    }
+    if (nextA.done !== nextB.done) {
+      return false // different lengths
+    }
+    if (nextA.value !== nextB.value) {
+      return false // mismatched value
+    }
+  }
+}

packages/nuqs/src/useQueryStates.ts

@@ -17,6 +17,7 @@ import { emitter, type CrossHookSyncPayload } from './lib/sync'
 import { type Parser } from './parsers'
 import { isAbsentFromUrl } from './lib/search-params'
 import { safeParse } from './lib/safe-parse'
+import { compareQuery } from './lib/compare'
 
 type KeyMapValue<Type> = Parser<Type> &
   Options & {
@@ -385,14 +386,18 @@ function parseMap<KeyMap extends UseQueryStatesKeysMap>(
   const state = Object.entries(keyMap).reduce((out, [stateKey, parser]) => {
     const urlKey = urlKeys?.[stateKey] ?? stateKey
     const queuedQuery = queuedQueries[urlKey]
+    const defaultValue = parser.type === 'multi' ? [] : null
     const query =
       queuedQuery === undefined
-        ? parser.type === 'multi'
-          ? (searchParams?.getAll(urlKey) ?? [])
-          : (searchParams?.get(urlKey) ?? null)
+        ? ((parser.type === 'multi'
+            ? searchParams?.getAll(urlKey)
+            : searchParams?.get(urlKey)) ?? defaultValue)
         : queuedQuery
-    // todo this === comparison likely won't work with arrays
-    if (cachedQuery && cachedState && (cachedQuery[urlKey] ?? null) === query) {
+    if (
+      cachedQuery &&
+      cachedState &&
+      compareQuery(cachedQuery[urlKey] ?? defaultValue, query)
+    ) {
       // Cache hit
       out[stateKey as keyof KeyMap] = cachedState[stateKey] ?? null
       return out