Added useSyncStreams reproduction

Author: bean1352

demos/react-supabase-time-based-sync/src/app/views/issues/page.tsx

@@ -1,10 +1,12 @@
 import { NavigationPage } from '@/components/navigation/NavigationPage';
 import { IssueItemWidget } from '@/components/widgets/IssueItemWidget';
 import { ISSUES_TABLE, IssueRecord } from '@/library/powersync/AppSchema';
+import { useSyncStreams } from '@/library/hooks/useSyncStreams';
 import { Box, Chip, List, Stack, Typography, styled } from '@mui/material';
 import { useQuery } from '@powersync/react';
 import React from 'react';
 
+// const AVAILABLE_DATES = ['2026-01-15'];
 const AVAILABLE_DATES = ['2026-01-15', '2026-01-14', '2026-01-10', '2026-01-07', '2026-01-05'];
 
 export default function IssuesPage() {
@@ -18,12 +20,22 @@ export default function IssuesPage() {
 
   const streams = selectedDates.map((date) => ({ name: 'issues_by_date', parameters: { date }, ttl: 0 }));
 
+  // --- Option A: useQuery with built-in streams support ---
+  // useQuery manages subscriptions internally. Comment out Option B when using this.
   const { data: issues } = useQuery<IssueRecord>(
     `SELECT * FROM ${ISSUES_TABLE} ORDER BY updated_at DESC`,
     [],
     { streams }
   );
 
+  // --- Option B: useSyncStreams hook (custom) + plain useQuery ---
+  // useSyncStreams manages subscriptions separately from the query.
+  // Comment out Option A and uncomment both lines below when using this.
+  // useSyncStreams(streams);
+  // const { data: issues } = useQuery<IssueRecord>(`SELECT * FROM ${ISSUES_TABLE} ORDER BY updated_at DESC`);
+
+  console.log('streams', streams.length);
+
   return (
     <NavigationPage title="Issues (Time-Based Sync)">
       <Box>

demos/react-supabase-time-based-sync/src/components/providers/SystemProvider.tsx

@@ -2,7 +2,7 @@ import { AppSchema } from '@/library/powersync/AppSchema';
 import { SupabaseConnector } from '@/library/powersync/SupabaseConnector';
 import { CircularProgress } from '@mui/material';
 import { PowerSyncContext } from '@powersync/react';
-import { createBaseLogger, LogLevel, PowerSyncDatabase, SyncClientImplementation } from '@powersync/web';
+import { createBaseLogger, LogLevel, PowerSyncDatabase, SyncClientImplementation, WASQLiteOpenFactory, WASQLiteVFS } from '@powersync/web';
 import React, { Suspense } from 'react';
 import { NavigationPanelContextProvider } from '../navigation/NavigationPanelContext';
 
@@ -11,9 +11,10 @@ export const useSupabase = () => React.useContext(SupabaseContext);
 
 export const db = new PowerSyncDatabase({
   schema: AppSchema,
-  database: {
-    dbFilename: 'time.db'
-  }
+  database: new WASQLiteOpenFactory({
+    dbFilename: 'time-sync.db',
+    vfs: WASQLiteVFS.OPFSCoopSyncVFS
+  })
 });
 
 export const SystemProvider = ({ children }: { children: React.ReactNode }) => {

demos/react-supabase-time-based-sync/src/library/hooks/useSyncStreams.ts

@@ -0,0 +1,55 @@
+import { useEffect, useMemo } from 'react';
+import { usePowerSync, useStatus, UseSyncStreamOptions } from '@powersync/react';
+
+/**
+ * Creates multiple PowerSync stream subscriptions. Subscriptions are kept alive as long as the
+ * React component calling this function. When it unmounts, or when the streams array contents
+ * change, all previous subscriptions are unsubscribed before new ones are created.
+ */
+export function useSyncStreams(streams: UseSyncStreamOptions[]) {
+  const db = usePowerSync();
+  const status = useStatus();
+
+  // Serialize streams so the effect only re-runs when content actually changes.
+  // We also parse it back so the effect closure uses the EXACT same streams that triggered it —
+  // avoiding the stale-ref problem where streamsRef.current may have advanced to a newer render
+  // by the time the effect flushes.
+  const serialized = useMemo(() => JSON.stringify(streams), [streams]);
+  const frozenStreams = useMemo<UseSyncStreamOptions[]>(() => JSON.parse(serialized), [serialized]);
+
+  useEffect(() => {
+    const abort = new AbortController();
+
+    const promises = frozenStreams.map((options) =>
+      db.syncStream(options.name, options.parameters ?? undefined).subscribe(options)
+    );
+
+    Promise.all(promises).then((resolvedSubs) => {
+      if (abort.signal.aborted) {
+        // Cleanup already ran before all promises resolved — unsubscribe immediately.
+        for (const sub of resolvedSubs) {
+          sub.unsubscribe();
+        }
+        return;
+      }
+
+      // Cleanup will run eventually — unsubscribe when it does.
+      abort.signal.addEventListener('abort', () => {
+        for (const sub of resolvedSubs) {
+          sub.unsubscribe();
+        }
+      });
+    });
+
+    return () => abort.abort();
+  }, [frozenStreams]);
+
+  return useMemo(
+    () =>
+      streams.map((options) =>
+        status.forStream({ name: options.name, parameters: options.parameters ?? null }) ?? null
+      ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [status, serialized]
+  );
+}