useSyncExternalStore

Author: josepot

packages/core/package.json

@@ -48,5 +48,11 @@
   "authors": [
     "Josep M Sobrepere (https://github.com/josepot)",
     "Victor Oliva (https://github.com/voliva)"
-  ]
+  ],
+  "dependencies": {
+    "use-sync-external-store": "^1.0.0-rc.0"
+  },
+  "devDependencies": {
+    "@types/use-sync-external-store": "^0.0.3"
+  }
 }

packages/core/src/internal/BehaviorObservable.ts

@@ -1,6 +1,6 @@
 import { Observable, Subscription } from "rxjs"
+import { SUSPENSE } from "../SUSPENSE"
 
 export interface BehaviorObservable<T> extends Observable<T> {
-  gV: (subscription?: Subscription) => T
-  aH: any
+  gV: (subscription?: Subscription) => Exclude<T, typeof SUSPENSE>
 }

packages/core/src/internal/share-latest.ts

@@ -75,21 +75,13 @@ const shareLatest = <T>(
     }
   }) as BehaviorObservable<T>
 
-  let error: any = EMPTY_VALUE
-  let timeoutToken: any
-  result.gV = (outterSubscription?: Subscription): T => {
-    if ((currentValue as any) !== SUSPENSE && currentValue !== EMPTY_VALUE) {
-      return currentValue
-    }
-    if (defaultValue !== EMPTY_VALUE) return defaultValue
+  result.gV = (
+    outterSubscription?: Subscription,
+  ): Exclude<T, typeof SUSPENSE> => {
+    if ((currentValue as any) !== SUSPENSE && currentValue !== EMPTY_VALUE)
+      return currentValue as any
 
-    if (error !== EMPTY_VALUE) {
-      clearTimeout(timeoutToken)
-      timeoutToken = setTimeout(() => {
-        error = EMPTY_VALUE
-      }, 50)
-      throw error
-    }
+    if (defaultValue !== EMPTY_VALUE) return defaultValue as any
 
     if (!subscription) {
       if (!outterSubscription) throw new Error("Missing Subscribe")
@@ -108,27 +100,23 @@ const shareLatest = <T>(
     if (promise) throw promise
 
     throw (promise = new Promise<T>((res, rej) => {
-      const setError = (e: any) => {
-        error = e
-        timeoutToken = setTimeout(() => {
-          error = EMPTY_VALUE
-        }, 50)
+      const error = (e: any) => {
         rej(e)
         promise = null
       }
-      const pSubs = subject!.subscribe(
-        (v) => {
+      const pSubs = subject!.subscribe({
+        next: (v) => {
           if (v !== (SUSPENSE as any)) {
             pSubs.unsubscribe()
             res(v)
             promise = null
           }
         },
-        setError,
-        () => {
-          setError(new Error("Empty observable"))
+        error,
+        complete: () => {
+          error(new Error("Empty observable"))
         },
-      )
+      })
       subscription!.add(pSubs)
     }))
   }

packages/core/src/internal/useObservable.ts

@@ -1,48 +1,42 @@
-import { useEffect, useState, useRef } from "react"
-import { SUSPENSE } from "../SUSPENSE"
-import { BehaviorObservable } from "../internal/BehaviorObservable"
 import { Subscription } from "rxjs"
+import { useSyncExternalStore } from "use-sync-external-store/shim"
+import { useRef, useState } from "react"
+import { BehaviorObservable } from "../internal/BehaviorObservable"
+import { SUSPENSE } from "../SUSPENSE"
+
+type VoidCb = () => void
+
+interface Ref<T> {
+  args: [(cb: VoidCb) => VoidCb, () => Exclude<T, typeof SUSPENSE>]
+  source$: BehaviorObservable<T>
+}
 
 export const useObservable = <O>(
   source$: BehaviorObservable<O>,
   subscription?: Subscription,
 ): Exclude<O, typeof SUSPENSE> => {
-  const [state, setState] = useState<[O, BehaviorObservable<O>]>(() => [
-    source$.gV(subscription),
-    source$,
-  ])
-  const prevStateRef = useRef<O | (() => O)>(state[0])
+  const [, setError] = useState()
+  const callbackRef = useRef<Ref<O>>()
 
-  if (source$ !== state[1]) {
-    setState([source$.gV(subscription), source$])
-  }
-
-  useEffect(() => {
-    const suspend = () => {
-      setState(() => [source$.gV(), source$])
-    }
+  if (!callbackRef.current || callbackRef.current.source$ !== source$) {
+    callbackRef.current = {
+      source$,
+      args: [
+        (next: () => void) => {
+          const subscription = source$.subscribe({
+            next,
+            error: (e) => {
+              setError(() => {
+                throw e
+              })
+            },
+          })
 
-    const subscription = source$.subscribe(
-      (value: O | typeof SUSPENSE) => {
-        if (value === SUSPENSE) {
-          suspend()
-        } else {
-          if (!Object.is(prevStateRef.current, value)) {
-            setState([(prevStateRef.current = value), source$])
-          }
-        }
-      },
-      (error: any) => {
-        setState(() => {
-          throw error
-        })
-      },
-    )
-
-    return () => {
-      subscription.unsubscribe()
+          return () => subscription.unsubscribe()
+        },
+        () => source$.gV(subscription),
+      ],
     }
-  }, [source$])
-
-  return state[0] as Exclude<O, typeof SUSPENSE>
+  }
+  return useSyncExternalStore(...callbackRef.current!.args)
 }

yarn.lock

@@ -1588,6 +1588,11 @@
   dependencies:
     "@types/jest" "*"
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@types/yargs-parser@*":
   version "20.2.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.0.tgz#dd3e6699ba3237f0348cd085e4698780204842f9"
@@ -4501,6 +4506,11 @@ universalify@^0.1.2:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
   integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
+use-sync-external-store@^1.0.0-rc.0:
+  version "1.0.0-rc.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.0.0-rc.0.tgz#0d8fb7cbc31ddfb3ee01225f6b0a700cf59c449b"
+  integrity sha512-0U9Xlc2QDFzSGMB0DvcJQL0+DIdxDPJC7mnZlYFbl7wrSrPMcs89X5TVkNB6Dzg618m8lZop+U+J6ow3vq9RAQ==
+
 v8-to-istanbul@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.0.tgz#0aeb763894f1a0a1676adf8a8b7612a38902446c"