@instantdb/react-common 0.22.155 → 0.22.156

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instantdb/react-common",
-  "version": "0.22.155",
+  "version": "0.22.156",
   "description": "Instant DB shared components for React and React Native",
   "homepage": "https://github.com/instantdb/instant/tree/main/client/packages/react-common",
   "repository": {
@@ -53,8 +53,8 @@
     "react": ">=16"
   },
   "dependencies": {
-    "@instantdb/core": "0.22.155",
-    "@instantdb/version": "0.22.155"
+    "@instantdb/core": "0.22.156",
+    "@instantdb/version": "0.22.156"
   },
   "scripts": {
     "test": "vitest",

package/src/index.ts

@@ -1,4 +1,9 @@
 import InstantReactAbstractDatabase from './InstantReactAbstractDatabase.tsx';
 import type { InstantReactRoom } from './InstantReactRoom.ts';
+import { useQueryInternal } from './useQuery.ts';
 
-export { InstantReactAbstractDatabase, type InstantReactRoom };
+export {
+  InstantReactAbstractDatabase,
+  type InstantReactRoom,
+  useQueryInternal,
+};

package/src/useQuery.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   weakHash,
   coerceQuery,
@@ -34,9 +36,11 @@ export function useQueryInternal<
   _core: InstantCoreDatabase<Schema, UseDates>,
   _query: null | Q,
   _opts?: InstaQLOptions,
+  serverSnapshot?: () => InstaQLLifecycleState<Schema, Q, UseDates> | undefined,
 ): {
   state: InstaQLLifecycleState<Schema, Q, UseDates>;
   query: any;
+  queryHash: string;
 } {
   if (_query && _opts && 'ruleParams' in _opts) {
     _query = { $$ruleParams: _opts['ruleParams'], ..._query };
@@ -53,6 +57,12 @@ export function useQueryInternal<
     stateForResult(_core._reactor.getPreviousResult(query)),
   );
 
+  // Cache the server snapshot to satisfy useSyncExternalStore's requirement
+  // that getServerSnapshot returns the same reference across calls.
+  const serverSnapshotCacheRef = useRef<
+    InstaQLLifecycleState<Schema, Q, UseDates>
+  >(defaultState as any);
+
   // Similar to `resultCacheRef`, `useSyncExternalStore` will unsubscribe
   // if `subscribe` changes, so we use `useCallback` to memoize the function.
   const subscribe = useCallback(
@@ -98,7 +108,17 @@ export function useQueryInternal<
   >(
     subscribe,
     () => resultCacheRef.current,
-    () => defaultState,
+    () => {
+      if (serverSnapshot && serverSnapshotCacheRef.current === defaultState) {
+        const result = serverSnapshot();
+        if (result) {
+          serverSnapshotCacheRef.current = result;
+        }
+      }
+
+      return serverSnapshotCacheRef.current;
+    },
   );
-  return { state, query };
+
+  return { state, query, queryHash };
 }