refactor: simplify useLiveQuery subscription lifecycle and add debug logging

Remove requestIdRef tracking mechanism in favor of simpler
dependency-based re-execution. Add debug logging for query
initialization and refresh operations to improve observability.

Author: mabels

use-fireproof/base/react/use-live-query.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import type { DocFragment, DocTypes, DocWithId, IndexKeyType, FPIndexRow, MapFn, Database } from "@fireproof/core-types-base";
 import type { LiveQueryResult } from "./types.js";
 
@@ -12,42 +12,38 @@ export function createUseLiveQuery(database: Database) {
     initialRows: FPIndexRow<K, T, R>[] = [],
   ): LiveQueryResult<T, K, R> {
     const [hydrated, setHydrated] = useState(false);
-    const [result, setResult] = useState<Omit<LiveQueryResult<T, K, R>, "hydrated">>({
+
+    const [result, setResult] = useState<Omit<LiveQueryResult<T, K, R>, "hydrated">>(() => ({
       docs: initialRows.map((r) => r.doc).filter((r): r is DocWithId<T> => !!r),
       rows: initialRows,
-    });
+    }));
 
     const queryString = useMemo(() => JSON.stringify(query), [query]);
     const mapFnString = useMemo(() => mapFn.toString(), [mapFn]);
 
-    // Track request ID to prevent stale results from overwriting newer queries
-    const requestIdRef = useRef(0);
-
-    // Reset hydrated when query dependencies change
     useEffect(() => {
       setHydrated(false);
-      requestIdRef.current += 1;
     }, [mapFnString, queryString]);
 
     const refreshRows = useCallback(async () => {
-      const myReq = ++requestIdRef.current;
       const res = await database.query<T, K, R>(mapFn, { ...query, includeDocs: true });
-
-      // Only update state if this is still the latest request
-      if (myReq === requestIdRef.current) {
-        setResult(res);
-        setHydrated(true);
-      }
-    }, [database, mapFn, query, mapFnString, queryString]);
+      database.logger.Debug().Str("dbname", database.name).Uint64("rows", res.rows.length).Msg("Refreshing live query");
+      setResult(res);
+      setHydrated(true);
+    }, [database, mapFnString, queryString]);
 
     useEffect(() => {
-      refreshRows();
+      database.logger.Debug().Str("dbname", database.name).Msg("Initializing live query subscription");
       const unsubscribe = database.subscribe(refreshRows);
       return () => {
         unsubscribe();
       };
     }, [database, refreshRows]);
 
+    useEffect(() => {
+      refreshRows();
+    }, [database, queryString, mapFnString]);
+
     return { ...result, hydrated };
   };
 }

use-fireproof/tests/use-fireproof-db-switch.test.tsx

@@ -12,14 +12,12 @@ describe("HOOK: useFireproof database switching", () => {
   let db1: Database, db2: Database;
 
   beforeAll(async () => {
-    // Setup two databases with different data
-    db1 = fireproof(db1Name);
-    db2 = fireproof(db2Name);
-
     // Add data to db1
+    db1 = fireproof(db1Name);
     await db1.put({ foo: "db1-data" });
 
     // Add different data to db2
+    db2 = fireproof(db2Name);
     await db2.put({ foo: "db2-data" });
   });