fix: WebSocket is closed before the connection is established warning

packages/sanity/src/core/store/_legacy/ResourceCacheProvider.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, useContext, useMemo} from 'react'
+import {type ReactNode, useContext, useState} from 'react'
 import {ResourceCacheContext} from 'sanity/_singletons'
 
 import {createMultiKeyWeakMap, type MultiKeyWeakMap} from './createMultiKeyWeakMap'
@@ -16,7 +16,7 @@ export interface ResourceCacheProviderProps {
 
 /** @internal */
 export function ResourceCacheProvider({children}: ResourceCacheProviderProps) {
-  const resourceCache = useMemo((): ResourceCache => {
+  const [resourceCache] = useState((): ResourceCache => {
     const namespaces = new Map<string, MultiKeyWeakMap>()
 
     // this is used to replace the `null` values in any `dependencies` so that
@@ -41,7 +41,7 @@ export function ResourceCacheProvider({children}: ResourceCacheProviderProps) {
         namespaceMap.set(dependenciesWithoutNull, value)
       },
     }
-  }, [])
+  })
 
   return (
     <ResourceCacheContext.Provider value={resourceCache}>{children}</ResourceCacheContext.Provider>

packages/sanity/src/core/store/_legacy/presence/useDocumentPresence.tsx

@@ -1,19 +1,15 @@
-import {useEffect, useState} from 'react'
+import {useMemo} from 'react'
+import {useObservable} from 'react-rx'
 
 import {usePresenceStore} from '../datastores'
 import {type DocumentPresence} from './types'
 
 /** @internal */
 export function useDocumentPresence(documentId: string): DocumentPresence[] {
   const presenceStore = usePresenceStore()
-  const [presence, setPresence] = useState<DocumentPresence[]>([])
-
-  useEffect(() => {
-    const subscription = presenceStore.documentPresence(documentId).subscribe(setPresence)
-    return () => {
-      subscription.unsubscribe()
-    }
-  }, [documentId, presenceStore])
-
-  return presence
+  const observable = useMemo(
+    () => presenceStore.documentPresence(documentId),
+    [documentId, presenceStore],
+  )
+  return useObservable(observable, [])
 }

packages/sanity/src/core/store/_legacy/presence/useGlobalPresence.tsx

@@ -1,20 +1,12 @@
-import {useEffect, useState} from 'react'
+import {useMemo} from 'react'
+import {useObservable} from 'react-rx'
 
 import {usePresenceStore} from '../datastores'
 import {type GlobalPresence} from './types'
 
 /** @internal */
 export function useGlobalPresence(): GlobalPresence[] {
-  const [presence, setPresence] = useState<GlobalPresence[]>([])
   const presenceStore = usePresenceStore()
-
-  useEffect(() => {
-    const subscription = presenceStore.globalPresence$.subscribe(setPresence)
-
-    return () => {
-      subscription.unsubscribe()
-    }
-  }, [presenceStore])
-
-  return presence
+  const observable = useMemo(() => presenceStore.globalPresence$, [presenceStore])
+  return useObservable(observable, [])
 }