Return cached subscriptions in useSyncStream

Author: simolus3

.changeset/few-months-rest.md

@@ -0,0 +1,5 @@
+---
+'@powersync/react': patch
+---
+
+Return cached information from `useSyncStream` if available, potentially reducing flicker.

packages/react/src/hooks/streams.ts

@@ -39,33 +39,30 @@ export function useSyncStream(options: UseSyncStreamOptions): SyncStreamStatus |
   const { name, parameters } = options;
   const db = usePowerSync();
   const status = useStatus();
-  const [subscription, setSubscription] = useState<SyncStreamSubscription | null>(null);
+  const stream = useMemo(() => db.syncStream(name, parameters), [name, parameters]);
 
   useEffect(() => {
     let active = true;
     let subscription: SyncStreamSubscription | null = null;
 
-    db.syncStream(name, parameters)
-      .subscribe(options)
-      .then((sub) => {
-        if (active) {
-          subscription = sub;
-          setSubscription(sub);
-        } else {
-          // The cleanup function already ran, unsubscribe immediately.
-          sub.unsubscribe();
-        }
-      });
+    stream.subscribe(options).then((sub) => {
+      if (active) {
+        subscription = sub;
+      } else {
+        // The cleanup function already ran, unsubscribe immediately.
+        sub.unsubscribe();
+      }
+    });
 
     return () => {
       active = false;
       // If we don't have a subscription yet, it'll still get cleaned up once the promise resolves because we've set
       // active to false.
       subscription?.unsubscribe();
     };
-  }, [name, parameters]);
+  }, [stream]);
 
-  return subscription && status.forStream(subscription);
+  return status.forStream(stream) ?? null;
 }
 
 /**

packages/react/tests/streams.test.tsx

@@ -52,6 +52,18 @@ describe('stream hooks', () => {
         expect(currentStreams()).toStrictEqual([]);
       });
 
+      it('useSyncStream with cached instance', async () => {
+        const existingSubscription = await db.syncStream('a').subscribe();
+        await existingSubscription.unsubscribe();
+        // The stream is still active at this point due to the TTL.
+
+        // This means that useSyncStream should have a result available on the first render.
+        const { result } = renderHook(() => useSyncStream({ name: 'a' }), {
+          wrapper: testWrapper
+        });
+        expect(result.current).not.toBeNull();
+      });
+
       it('useQuery can take syncStream instance', async () => {
         const { result } = renderHook(() => useQuery('SELECT 1', [], { streams: [db.syncStream('a')] }), {
           wrapper: testWrapper