fix: getSnapshot result

Author: Col0ring

.changeset/swift-cougars-hug.md

@@ -0,0 +1,7 @@
+---
+'@subscribe-kit/react': patch
+'@subscribe-kit/core': patch
+'@subscribe-kit/shared': patch
+---
+
+fix getSnapshot value

examples/react/src/App.tsx

@@ -13,7 +13,7 @@ const { useWatch } = createWatch({
 })
 
 function App() {
-  const count = useWatch('count')
+  const [count] = useWatch([['count']])
   return (
     <div className="App">
       <div>

packages/react/src/createWatch.ts

@@ -6,7 +6,7 @@ import {
   SubscribeValues,
 } from '@subscribe-kit/core'
 import { ensureArray, Tuple } from '@subscribe-kit/shared'
-import { useSyncExternalStore } from 'react'
+import { useCallback, useRef, useSyncExternalStore } from 'react'
 import { useMemoizedEqualValue } from './hooks/useMemoizedEqualValue'
 
 export interface CreateWatchOptions<T> {
@@ -24,8 +24,9 @@ export function createWatch<T = any>(options: CreateWatchOptions<T>) {
     keyOrKeys?: K
   ) {
     const memoizedKey = useMemoizedEqualValue(keyOrKeys)
-    const value: any = useSyncExternalStore(
-      (listener) => {
+    const pathsValueRef = useRef<any[]>([])
+    const subscribe = useCallback(
+      (listener: () => void) => {
         const unsubscribe = memoizedKey
           ? store.observer.subscribe(memoizedKey as any, listener, {
               immediate: true,
@@ -35,19 +36,32 @@ export function createWatch<T = any>(options: CreateWatchOptions<T>) {
             })
         return unsubscribe
       },
-      () => {
-        if (memoizedKey) {
-          const path = ensureArray(keyOrKeys) as PropertyKey[] | PropertyKey[][]
-          const isPaths = path.some((p) => Array.isArray(p))
-          if (isPaths) {
-            const paths = path.map((p) => ensureArray(p) as PropertyKey[])
-            return paths.map((p) => getValueByPath(p, store.values))
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [memoizedKey, store]
+    )
+    const getSnapshot = useCallback(() => {
+      if (memoizedKey) {
+        const path = ensureArray(memoizedKey) as PropertyKey[] | PropertyKey[][]
+        const isPaths = path.some((p) => Array.isArray(p))
+        if (isPaths) {
+          const paths = path.map((p) => ensureArray(p) as PropertyKey[])
+          const newValue = paths.map((p) => getValueByPath(p, store.values))
+          if (
+            newValue.length !== pathsValueRef.current.length ||
+            newValue.some(
+              (item, index) => item !== pathsValueRef.current[index]
+            )
+          ) {
+            pathsValueRef.current = newValue
           }
-          return getValueByPath(path as PropertyKey[], store.values)
+          return pathsValueRef.current
         }
-        return store.values
+        return getValueByPath(path as PropertyKey[], store.values)
       }
-    )
+      return store.values
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [memoizedKey, store])
+    const value: any = useSyncExternalStore(subscribe, getSnapshot)
     return value
   }
   return {