react-rx 3.1.3 → 4.0.1-canary.0

package/dist/index.cjs

@@ -1,62 +1,81 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var react = require("react"), rxjs = require("rxjs"), operators = require("rxjs/operators"), observableCallback = require("observable-callback"), useEffectEvent = require("use-effect-event");
+var reactCompilerRuntime = require("react-compiler-runtime"), react = require("react"), rxjs = require("rxjs"), operators = require("rxjs/operators"), observableCallback = require("observable-callback"), useEffectEvent = require("use-effect-event");
 function getValue(value) {
   return typeof value == "function" ? value() : value;
 }
 const cache = /* @__PURE__ */ new WeakMap();
 function useObservable(observable, initialValue) {
-  const initialValueRef = react.useRef(getValue(initialValue));
-  react.useEffect(() => {
-    initialValueRef.current = getValue(initialValue);
-  }, [initialValue]);
-  const store = react.useMemo(() => {
-    if (!cache.has(observable)) {
-      const entry = {
-        snapshot: initialValueRef.current
-      };
-      entry.observable = observable.pipe(
-        operators.map((value) => ({ snapshot: value, error: void 0 })),
-        rxjs.catchError((error) => rxjs.of({ snapshot: void 0, error })),
-        operators.tap(({ snapshot, error }) => {
-          entry.snapshot = snapshot, entry.error = error;
-        }),
-        // Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state
-        // and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.
-        operators.map((value) => {
-        }),
-        // Ensure that the cache entry is deleted when the observable completes or errors.
-        rxjs.finalize(() => cache.delete(observable)),
-        rxjs.share()
-      ), entry.subscription = entry.observable.subscribe(), cache.set(observable, entry);
-    }
-    const instance = cache.get(observable);
-    return instance.subscription.closed && (instance.subscription = instance.observable.subscribe()), {
-      subscribe: (onStoreChange) => {
-        const subscription = instance.observable.subscribe(onStoreChange);
-        return instance.subscription.unsubscribe(), () => {
-          subscription.unsubscribe();
-        };
-      },
-      getSnapshot: () => {
-        if (instance.error)
-          throw instance.error;
-        return instance.snapshot;
-      }
+  const $ = reactCompilerRuntime.c(12);
+  if (!cache.has(observable)) {
+    const entry = {
+      snapshot: getValue(initialValue)
     };
-  }, [observable]);
-  return react.useSyncExternalStore(
-    store.subscribe,
-    store.getSnapshot,
-    typeof initialValueRef.current > "u" ? void 0 : () => initialValueRef.current
-  );
+    entry.observable = observable.pipe(operators.map(_temp$1), rxjs.catchError(_temp2), operators.tap((t02) => {
+      const {
+        snapshot,
+        error: error_0
+      } = t02;
+      entry.snapshot = snapshot, entry.error = error_0;
+    }), operators.map(_temp3), rxjs.finalize(() => cache.delete(observable)), rxjs.share({
+      resetOnRefCountZero: _temp4
+    })), entry.observable.subscribe().unsubscribe(), cache.set(observable, entry);
+  }
+  let t0;
+  $[0] !== observable ? (t0 = cache.get(observable), $[0] = observable, $[1] = t0) : t0 = $[1];
+  const instance = t0;
+  let t1, t2;
+  $[2] !== instance.observable ? (t2 = (onStoreChange) => {
+    const subscription_0 = instance.observable.subscribe(onStoreChange);
+    return () => {
+      subscription_0.unsubscribe();
+    };
+  }, $[2] = instance.observable, $[3] = t2) : t2 = $[3];
+  let t3;
+  $[4] !== instance.error || $[5] !== instance.snapshot ? (t3 = () => {
+    if (instance.error)
+      throw instance.error;
+    return instance.snapshot;
+  }, $[4] = instance.error, $[5] = instance.snapshot, $[6] = t3) : t3 = $[6];
+  let t4;
+  $[7] !== t2 || $[8] !== t3 ? (t4 = {
+    subscribe: t2,
+    getSnapshot: t3
+  }, $[7] = t2, $[8] = t3, $[9] = t4) : t4 = $[9], t1 = t4;
+  const store = t1;
+  let t5;
+  return $[10] !== initialValue ? (t5 = typeof initialValue > "u" ? void 0 : () => getValue(initialValue), $[10] = initialValue, $[11] = t5) : t5 = $[11], react.useSyncExternalStore(store.subscribe, store.getSnapshot, t5);
+}
+function _temp4() {
+  return rxjs.timer(0, rxjs.asapScheduler);
+}
+function _temp3(value_0) {
+}
+function _temp2(error) {
+  return rxjs.of({
+    snapshot: void 0,
+    error
+  });
+}
+function _temp$1(value) {
+  return {
+    snapshot: value,
+    error: void 0
+  };
 }
 function useObservableEvent(handleEvent) {
-  const [[calls$, call]] = react.useState(() => observableCallback.observableCallback()), onEvent = useEffectEvent.useEffectEvent((observable) => handleEvent(observable));
-  return react.useEffect(() => {
-    const subscription = calls$.pipe((observable) => onEvent(observable)).subscribe();
+  const $ = reactCompilerRuntime.c(6), [t0] = react.useState(_temp), [calls$, call] = t0;
+  let t1;
+  $[0] !== handleEvent ? (t1 = (observable) => handleEvent(observable), $[0] = handleEvent, $[1] = t1) : t1 = $[1];
+  const onEvent = useEffectEvent.useEffectEvent(t1);
+  let t2, t3;
+  return $[2] !== calls$ || $[3] !== onEvent ? (t2 = () => {
+    const subscription = calls$.pipe((observable_0) => onEvent(observable_0)).subscribe();
     return () => subscription.unsubscribe();
-  }, [calls$, onEvent]), call;
+  }, t3 = [calls$, onEvent], $[2] = calls$, $[3] = onEvent, $[4] = t2, $[5] = t3) : (t2 = $[4], t3 = $[5]), react.useEffect(t2, t3), call;
+}
+function _temp() {
+  return observableCallback.observableCallback();
 }
 exports.useObservable = useObservable;
 exports.useObservableEvent = useObservableEvent;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useEffect, useMemo, useRef, useSyncExternalStore} from 'react'\nimport {\n  catchError,\n  finalize,\n  type Observable,\n  type ObservedValueOf,\n  of,\n  share,\n  type Subscription,\n} from 'rxjs'\nimport {map, tap} from 'rxjs/operators'\n\nfunction getValue<T>(value: T): T extends () => infer U ? U : T {\n  return typeof value === 'function' ? value() : value\n}\n\ninterface CacheRecord<T> {\n  subscription: Subscription\n  observable: Observable<void>\n  snapshot: T\n  error?: unknown\n}\n\nconst cache = new WeakMap<Observable<any>, CacheRecord<any>>()\n\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n  observable: ObservableType,\n  initialValue: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),\n): ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n  observable: ObservableType,\n): undefined | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n  observable: ObservableType,\n  initialValue: InitialValue,\n): InitialValue | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n  observable: ObservableType,\n  initialValue?: InitialValue | (() => InitialValue),\n): InitialValue | ObservedValueOf<ObservableType> {\n  /**\n   * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.\n   * But we also don't want the initialValue to be stale if the observable changes.\n   */\n  const initialValueRef = useRef(getValue(initialValue) as ObservedValueOf<ObservableType>)\n\n  /**\n   * Ensures that the initialValue is always up-to-date in case the observable changes.\n   */\n  useEffect(() => {\n    initialValueRef.current = getValue(initialValue) as ObservedValueOf<ObservableType>\n  }, [initialValue])\n\n  const store = useMemo(() => {\n    if (!cache.has(observable)) {\n      const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {\n        snapshot: initialValueRef.current,\n      }\n      entry.observable = observable.pipe(\n        map((value) => ({snapshot: value, error: undefined})),\n        catchError((error) => of({snapshot: undefined, error})),\n        tap(({snapshot, error}) => {\n          entry.snapshot = snapshot\n          entry.error = error\n        }),\n        // Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state\n        // and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.\n        map((value) => void value),\n        // Ensure that the cache entry is deleted when the observable completes or errors.\n        finalize(() => cache.delete(observable)),\n        share(),\n      )\n\n      // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.\n      entry.subscription = entry.observable.subscribe()\n\n      cache.set(observable, entry as CacheRecord<ObservedValueOf<ObservableType>>)\n    }\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    const instance = cache.get(observable)!\n    if (instance.subscription.closed) {\n      instance.subscription = instance.observable.subscribe()\n    }\n\n    return {\n      subscribe: (onStoreChange: () => void) => {\n        const subscription = instance.observable.subscribe(onStoreChange)\n        instance.subscription.unsubscribe()\n        return () => {\n          subscription.unsubscribe()\n        }\n      },\n      getSnapshot: () => {\n        if (instance.error) {\n          throw instance.error\n        }\n        return instance.snapshot\n      },\n    }\n  }, [observable])\n\n  return useSyncExternalStore<ObservedValueOf<ObservableType>>(\n    store.subscribe,\n    store.getSnapshot,\n    typeof initialValueRef.current === 'undefined' ? undefined : () => initialValueRef.current,\n  )\n}\n","import {observableCallback} from 'observable-callback'\nimport {useEffect, useState} from 'react'\nimport {type Observable} from 'rxjs'\nimport {useEffectEvent} from 'use-effect-event'\n\n/** @public */\nexport function useObservableEvent<T, U>(\n  handleEvent: (arg: Observable<T>) => Observable<U>,\n): (arg: T) => void {\n  const [[calls$, call]] = useState(() => observableCallback<T>())\n\n  const onEvent = useEffectEvent((observable: Observable<T>) => handleEvent(observable))\n\n  useEffect(() => {\n    const subscription = calls$.pipe((observable) => onEvent(observable)).subscribe()\n    return () => subscription.unsubscribe()\n  }, [calls$, onEvent])\n\n  return call\n}\n"],"names":["useRef","useEffect","useMemo","map","catchError","of","tap","finalize","share","useSyncExternalStore","useState","observableCallback","useEffectEvent"],"mappings":";;;AAYA,SAAS,SAAY,OAA2C;AAC9D,SAAO,OAAO,SAAU,aAAa,MAAA,IAAU;AACjD;AASA,MAAM,4BAAY;AAiBF,SAAA,cACd,YACA,cACgD;AAKhD,QAAM,kBAAkBA,MAAA,OAAO,SAAS,YAAY,CAAoC;AAKxFC,QAAAA,UAAU,MAAM;AACE,oBAAA,UAAU,SAAS,YAAY;AAAA,EAAA,GAC9C,CAAC,YAAY,CAAC;AAEX,QAAA,QAAQC,MAAAA,QAAQ,MAAM;AAC1B,QAAI,CAAC,MAAM,IAAI,UAAU,GAAG;AAC1B,YAAM,QAA+D;AAAA,QACnE,UAAU,gBAAgB;AAAA,MAAA;AAE5B,YAAM,aAAa,WAAW;AAAA,QAC5BC,cAAI,CAAC,WAAW,EAAC,UAAU,OAAO,OAAO,SAAW;AAAA,QACpDC,gBAAW,CAAC,UAAUC,QAAG,EAAC,UAAU,QAAW,MAAK,CAAC,CAAC;AAAA,QACtDC,UAAAA,IAAI,CAAC,EAAC,UAAU,YAAW;AACnB,gBAAA,WAAW,UACjB,MAAM,QAAQ;AAAA,QAAA,CACf;AAAA;AAAA;AAAA,QAGDH,UAAA,IAAI,CAAC,UAAO;AAAA,QAAA,CAAa;AAAA;AAAA,QAEzBI,KAAAA,SAAS,MAAM,MAAM,OAAO,UAAU,CAAC;AAAA,QACvCC,WAAM;AAAA,MACR,GAGA,MAAM,eAAe,MAAM,WAAW,aAEtC,MAAM,IAAI,YAAY,KAAqD;AAAA,IAC7E;AAEM,UAAA,WAAW,MAAM,IAAI,UAAU;AACjC,WAAA,SAAS,aAAa,WACxB,SAAS,eAAe,SAAS,WAAW,cAGvC;AAAA,MACL,WAAW,CAAC,kBAA8B;AACxC,cAAM,eAAe,SAAS,WAAW,UAAU,aAAa;AACvD,eAAA,SAAA,aAAa,YAAY,GAC3B,MAAM;AACX,uBAAa,YAAY;AAAA,QAAA;AAAA,MAE7B;AAAA,MACA,aAAa,MAAM;AACjB,YAAI,SAAS;AACX,gBAAM,SAAS;AAEjB,eAAO,SAAS;AAAA,MAClB;AAAA,IAAA;AAAA,EACF,GACC,CAAC,UAAU,CAAC;AAER,SAAAC,MAAA;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO,gBAAgB,UAAY,MAAc,SAAY,MAAM,gBAAgB;AAAA,EAAA;AAEvF;ACxGO,SAAS,mBACd,aACkB;AAClB,QAAM,CAAC,CAAC,QAAQ,IAAI,CAAC,IAAIC,MAAAA,SAAS,MAAMC,mBAAsB,mBAAA,CAAC,GAEzD,UAAUC,eAAA,eAAe,CAAC,eAA8B,YAAY,UAAU,CAAC;AAErF,SAAAX,MAAA,UAAU,MAAM;AACR,UAAA,eAAe,OAAO,KAAK,CAAC,eAAe,QAAQ,UAAU,CAAC,EAAE;AAC/D,WAAA,MAAM,aAAa;EACzB,GAAA,CAAC,QAAQ,OAAO,CAAC,GAEb;AACT;;;"}
+{"version":3,"file":"index.cjs","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useMemo, useSyncExternalStore} from 'react'\nimport {\n  asapScheduler,\n  catchError,\n  finalize,\n  type Observable,\n  type ObservedValueOf,\n  of,\n  share,\n  timer,\n} from 'rxjs'\nimport {map, tap} from 'rxjs/operators'\n\nfunction getValue<T>(value: T): T extends () => infer U ? U : T {\n  return typeof value === 'function' ? value() : value\n}\n\ninterface CacheRecord<T> {\n  observable: Observable<void>\n  snapshot: T\n  error?: unknown\n}\n\nconst cache = new WeakMap<Observable<any>, CacheRecord<any>>()\n\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n  observable: ObservableType,\n  initialValue: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),\n): ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n  observable: ObservableType,\n): undefined | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n  observable: ObservableType,\n  initialValue: InitialValue | (() => InitialValue),\n): InitialValue | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n  observable: ObservableType,\n  initialValue?: InitialValue | (() => InitialValue),\n): InitialValue | ObservedValueOf<ObservableType> {\n  if (!cache.has(observable)) {\n    const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {\n      snapshot: getValue(initialValue) as ObservedValueOf<ObservableType>,\n    }\n    entry.observable = observable.pipe(\n      map((value) => ({snapshot: value, error: undefined})),\n      catchError((error) => of({snapshot: undefined, error})),\n      tap(({snapshot, error}) => {\n        entry.snapshot = snapshot\n        entry.error = error\n      }),\n      // Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state\n      // and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.\n      map((value) => void value),\n      // Ensure that the cache entry is deleted when the observable completes or errors.\n      finalize(() => cache.delete(observable)),\n      share({resetOnRefCountZero: () => timer(0, asapScheduler)}),\n    )\n\n    // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.\n    const subscription = entry.observable.subscribe()\n    subscription.unsubscribe()\n\n    cache.set(observable, entry as CacheRecord<ObservedValueOf<ObservableType>>)\n  }\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const instance = cache.get(observable)!\n\n  const store = useMemo(() => {\n    return {\n      subscribe: (onStoreChange: () => void) => {\n        const subscription = instance.observable.subscribe(onStoreChange)\n        return () => {\n          subscription.unsubscribe()\n        }\n      },\n      getSnapshot: () => {\n        if (instance.error) {\n          throw instance.error\n        }\n        return instance.snapshot\n      },\n    }\n  }, [instance])\n\n  return useSyncExternalStore<ObservedValueOf<ObservableType>>(\n    store.subscribe,\n    store.getSnapshot,\n    typeof initialValue === 'undefined'\n      ? undefined\n      : () => getValue(initialValue) as ObservedValueOf<ObservableType>,\n  )\n}\n","import {observableCallback} from 'observable-callback'\nimport {useEffect, useState} from 'react'\nimport {type Observable} from 'rxjs'\nimport {useEffectEvent} from 'use-effect-event'\n\n/** @public */\nexport function useObservableEvent<T, U>(\n  handleEvent: (arg: Observable<T>) => Observable<U>,\n): (arg: T) => void {\n  const [[calls$, call]] = useState(() => observableCallback<T>())\n\n  const onEvent = useEffectEvent((observable: Observable<T>) => handleEvent(observable))\n\n  useEffect(() => {\n    const subscription = calls$.pipe((observable) => onEvent(observable)).subscribe()\n    return () => subscription.unsubscribe()\n  }, [calls$, onEvent])\n\n  return call\n}\n"],"names":["getValue","value","cache","WeakMap","useObservable","observable","initialValue","$","_c","has","entry","snapshot","pipe","map","_temp","catchError","_temp2","tap","t0","error","error_0","_temp3","finalize","delete","share","resetOnRefCountZero","_temp4","subscribe","unsubscribe","set","get","instance","t1","t2","onStoreChange","subscription_0","subscription","t3","t4","getSnapshot","store","t5","undefined","useSyncExternalStore","timer","asapScheduler","value_0","of","useObservableEvent","handleEvent","useState","calls$","call","onEvent","useEffectEvent","observable_0","useEffect","observableCallback"],"mappings":"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"}

package/dist/index.d.cts

@@ -15,7 +15,7 @@ export declare function useObservable<ObservableType extends Observable<any>>(
 /** @public */
 export declare function useObservable<ObservableType extends Observable<any>, InitialValue>(
   observable: ObservableType,
-  initialValue: InitialValue,
+  initialValue: InitialValue | (() => InitialValue),
 ): InitialValue | ObservedValueOf<ObservableType>
 
 /** @public */

package/dist/index.d.ts

@@ -15,7 +15,7 @@ export declare function useObservable<ObservableType extends Observable<any>>(
 /** @public */
 export declare function useObservable<ObservableType extends Observable<any>, InitialValue>(
   observable: ObservableType,
-  initialValue: InitialValue,
+  initialValue: InitialValue | (() => InitialValue),
 ): InitialValue | ObservedValueOf<ObservableType>
 
 /** @public */

package/dist/index.js

@@ -1,5 +1,6 @@
-import { useRef, useEffect, useMemo, useSyncExternalStore, useState } from "react";
-import { catchError, of, finalize, share } from "rxjs";
+import { c } from "react-compiler-runtime";
+import { useSyncExternalStore, useState, useEffect } from "react";
+import { catchError, finalize, share, timer, asapScheduler, of } from "rxjs";
 import { map, tap } from "rxjs/operators";
 import { observableCallback } from "observable-callback";
 import { useEffectEvent } from "use-effect-event";
@@ -8,57 +9,76 @@ function getValue(value) {
 }
 const cache = /* @__PURE__ */ new WeakMap();
 function useObservable(observable, initialValue) {
-  const initialValueRef = useRef(getValue(initialValue));
-  useEffect(() => {
-    initialValueRef.current = getValue(initialValue);
-  }, [initialValue]);
-  const store = useMemo(() => {
-    if (!cache.has(observable)) {
-      const entry = {
-        snapshot: initialValueRef.current
-      };
-      entry.observable = observable.pipe(
-        map((value) => ({ snapshot: value, error: void 0 })),
-        catchError((error) => of({ snapshot: void 0, error })),
-        tap(({ snapshot, error }) => {
-          entry.snapshot = snapshot, entry.error = error;
-        }),
-        // Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state
-        // and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.
-        map((value) => {
-        }),
-        // Ensure that the cache entry is deleted when the observable completes or errors.
-        finalize(() => cache.delete(observable)),
-        share()
-      ), entry.subscription = entry.observable.subscribe(), cache.set(observable, entry);
-    }
-    const instance = cache.get(observable);
-    return instance.subscription.closed && (instance.subscription = instance.observable.subscribe()), {
-      subscribe: (onStoreChange) => {
-        const subscription = instance.observable.subscribe(onStoreChange);
-        return instance.subscription.unsubscribe(), () => {
-          subscription.unsubscribe();
-        };
-      },
-      getSnapshot: () => {
-        if (instance.error)
-          throw instance.error;
-        return instance.snapshot;
-      }
+  const $ = c(12);
+  if (!cache.has(observable)) {
+    const entry = {
+      snapshot: getValue(initialValue)
     };
-  }, [observable]);
-  return useSyncExternalStore(
-    store.subscribe,
-    store.getSnapshot,
-    typeof initialValueRef.current > "u" ? void 0 : () => initialValueRef.current
-  );
+    entry.observable = observable.pipe(map(_temp$1), catchError(_temp2), tap((t02) => {
+      const {
+        snapshot,
+        error: error_0
+      } = t02;
+      entry.snapshot = snapshot, entry.error = error_0;
+    }), map(_temp3), finalize(() => cache.delete(observable)), share({
+      resetOnRefCountZero: _temp4
+    })), entry.observable.subscribe().unsubscribe(), cache.set(observable, entry);
+  }
+  let t0;
+  $[0] !== observable ? (t0 = cache.get(observable), $[0] = observable, $[1] = t0) : t0 = $[1];
+  const instance = t0;
+  let t1, t2;
+  $[2] !== instance.observable ? (t2 = (onStoreChange) => {
+    const subscription_0 = instance.observable.subscribe(onStoreChange);
+    return () => {
+      subscription_0.unsubscribe();
+    };
+  }, $[2] = instance.observable, $[3] = t2) : t2 = $[3];
+  let t3;
+  $[4] !== instance.error || $[5] !== instance.snapshot ? (t3 = () => {
+    if (instance.error)
+      throw instance.error;
+    return instance.snapshot;
+  }, $[4] = instance.error, $[5] = instance.snapshot, $[6] = t3) : t3 = $[6];
+  let t4;
+  $[7] !== t2 || $[8] !== t3 ? (t4 = {
+    subscribe: t2,
+    getSnapshot: t3
+  }, $[7] = t2, $[8] = t3, $[9] = t4) : t4 = $[9], t1 = t4;
+  const store = t1;
+  let t5;
+  return $[10] !== initialValue ? (t5 = typeof initialValue > "u" ? void 0 : () => getValue(initialValue), $[10] = initialValue, $[11] = t5) : t5 = $[11], useSyncExternalStore(store.subscribe, store.getSnapshot, t5);
+}
+function _temp4() {
+  return timer(0, asapScheduler);
+}
+function _temp3(value_0) {
+}
+function _temp2(error) {
+  return of({
+    snapshot: void 0,
+    error
+  });
+}
+function _temp$1(value) {
+  return {
+    snapshot: value,
+    error: void 0
+  };
 }
 function useObservableEvent(handleEvent) {
-  const [[calls$, call]] = useState(() => observableCallback()), onEvent = useEffectEvent((observable) => handleEvent(observable));
-  return useEffect(() => {
-    const subscription = calls$.pipe((observable) => onEvent(observable)).subscribe();
+  const $ = c(6), [t0] = useState(_temp), [calls$, call] = t0;
+  let t1;
+  $[0] !== handleEvent ? (t1 = (observable) => handleEvent(observable), $[0] = handleEvent, $[1] = t1) : t1 = $[1];
+  const onEvent = useEffectEvent(t1);
+  let t2, t3;
+  return $[2] !== calls$ || $[3] !== onEvent ? (t2 = () => {
+    const subscription = calls$.pipe((observable_0) => onEvent(observable_0)).subscribe();
     return () => subscription.unsubscribe();
-  }, [calls$, onEvent]), call;
+  }, t3 = [calls$, onEvent], $[2] = calls$, $[3] = onEvent, $[4] = t2, $[5] = t3) : (t2 = $[4], t3 = $[5]), useEffect(t2, t3), call;
+}
+function _temp() {
+  return observableCallback();
 }
 export {
   useObservable,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useEffect, useMemo, useRef, useSyncExternalStore} from 'react'\nimport {\n  catchError,\n  finalize,\n  type Observable,\n  type ObservedValueOf,\n  of,\n  share,\n  type Subscription,\n} from 'rxjs'\nimport {map, tap} from 'rxjs/operators'\n\nfunction getValue<T>(value: T): T extends () => infer U ? U : T {\n  return typeof value === 'function' ? value() : value\n}\n\ninterface CacheRecord<T> {\n  subscription: Subscription\n  observable: Observable<void>\n  snapshot: T\n  error?: unknown\n}\n\nconst cache = new WeakMap<Observable<any>, CacheRecord<any>>()\n\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n  observable: ObservableType,\n  initialValue: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),\n): ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n  observable: ObservableType,\n): undefined | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n  observable: ObservableType,\n  initialValue: InitialValue,\n): InitialValue | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n  observable: ObservableType,\n  initialValue?: InitialValue | (() => InitialValue),\n): InitialValue | ObservedValueOf<ObservableType> {\n  /**\n   * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.\n   * But we also don't want the initialValue to be stale if the observable changes.\n   */\n  const initialValueRef = useRef(getValue(initialValue) as ObservedValueOf<ObservableType>)\n\n  /**\n   * Ensures that the initialValue is always up-to-date in case the observable changes.\n   */\n  useEffect(() => {\n    initialValueRef.current = getValue(initialValue) as ObservedValueOf<ObservableType>\n  }, [initialValue])\n\n  const store = useMemo(() => {\n    if (!cache.has(observable)) {\n      const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {\n        snapshot: initialValueRef.current,\n      }\n      entry.observable = observable.pipe(\n        map((value) => ({snapshot: value, error: undefined})),\n        catchError((error) => of({snapshot: undefined, error})),\n        tap(({snapshot, error}) => {\n          entry.snapshot = snapshot\n          entry.error = error\n        }),\n        // Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state\n        // and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.\n        map((value) => void value),\n        // Ensure that the cache entry is deleted when the observable completes or errors.\n        finalize(() => cache.delete(observable)),\n        share(),\n      )\n\n      // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.\n      entry.subscription = entry.observable.subscribe()\n\n      cache.set(observable, entry as CacheRecord<ObservedValueOf<ObservableType>>)\n    }\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    const instance = cache.get(observable)!\n    if (instance.subscription.closed) {\n      instance.subscription = instance.observable.subscribe()\n    }\n\n    return {\n      subscribe: (onStoreChange: () => void) => {\n        const subscription = instance.observable.subscribe(onStoreChange)\n        instance.subscription.unsubscribe()\n        return () => {\n          subscription.unsubscribe()\n        }\n      },\n      getSnapshot: () => {\n        if (instance.error) {\n          throw instance.error\n        }\n        return instance.snapshot\n      },\n    }\n  }, [observable])\n\n  return useSyncExternalStore<ObservedValueOf<ObservableType>>(\n    store.subscribe,\n    store.getSnapshot,\n    typeof initialValueRef.current === 'undefined' ? undefined : () => initialValueRef.current,\n  )\n}\n","import {observableCallback} from 'observable-callback'\nimport {useEffect, useState} from 'react'\nimport {type Observable} from 'rxjs'\nimport {useEffectEvent} from 'use-effect-event'\n\n/** @public */\nexport function useObservableEvent<T, U>(\n  handleEvent: (arg: Observable<T>) => Observable<U>,\n): (arg: T) => void {\n  const [[calls$, call]] = useState(() => observableCallback<T>())\n\n  const onEvent = useEffectEvent((observable: Observable<T>) => handleEvent(observable))\n\n  useEffect(() => {\n    const subscription = calls$.pipe((observable) => onEvent(observable)).subscribe()\n    return () => subscription.unsubscribe()\n  }, [calls$, onEvent])\n\n  return call\n}\n"],"names":[],"mappings":";;;;;AAYA,SAAS,SAAY,OAA2C;AAC9D,SAAO,OAAO,SAAU,aAAa,MAAA,IAAU;AACjD;AASA,MAAM,4BAAY;AAiBF,SAAA,cACd,YACA,cACgD;AAKhD,QAAM,kBAAkB,OAAO,SAAS,YAAY,CAAoC;AAKxF,YAAU,MAAM;AACE,oBAAA,UAAU,SAAS,YAAY;AAAA,EAAA,GAC9C,CAAC,YAAY,CAAC;AAEX,QAAA,QAAQ,QAAQ,MAAM;AAC1B,QAAI,CAAC,MAAM,IAAI,UAAU,GAAG;AAC1B,YAAM,QAA+D;AAAA,QACnE,UAAU,gBAAgB;AAAA,MAAA;AAE5B,YAAM,aAAa,WAAW;AAAA,QAC5B,IAAI,CAAC,WAAW,EAAC,UAAU,OAAO,OAAO,SAAW;AAAA,QACpD,WAAW,CAAC,UAAU,GAAG,EAAC,UAAU,QAAW,MAAK,CAAC,CAAC;AAAA,QACtD,IAAI,CAAC,EAAC,UAAU,YAAW;AACnB,gBAAA,WAAW,UACjB,MAAM,QAAQ;AAAA,QAAA,CACf;AAAA;AAAA;AAAA,QAGD,IAAI,CAAC,UAAO;AAAA,QAAA,CAAa;AAAA;AAAA,QAEzB,SAAS,MAAM,MAAM,OAAO,UAAU,CAAC;AAAA,QACvC,MAAM;AAAA,MACR,GAGA,MAAM,eAAe,MAAM,WAAW,aAEtC,MAAM,IAAI,YAAY,KAAqD;AAAA,IAC7E;AAEM,UAAA,WAAW,MAAM,IAAI,UAAU;AACjC,WAAA,SAAS,aAAa,WACxB,SAAS,eAAe,SAAS,WAAW,cAGvC;AAAA,MACL,WAAW,CAAC,kBAA8B;AACxC,cAAM,eAAe,SAAS,WAAW,UAAU,aAAa;AACvD,eAAA,SAAA,aAAa,YAAY,GAC3B,MAAM;AACX,uBAAa,YAAY;AAAA,QAAA;AAAA,MAE7B;AAAA,MACA,aAAa,MAAM;AACjB,YAAI,SAAS;AACX,gBAAM,SAAS;AAEjB,eAAO,SAAS;AAAA,MAClB;AAAA,IAAA;AAAA,EACF,GACC,CAAC,UAAU,CAAC;AAER,SAAA;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO,gBAAgB,UAAY,MAAc,SAAY,MAAM,gBAAgB;AAAA,EAAA;AAEvF;ACxGO,SAAS,mBACd,aACkB;AAClB,QAAM,CAAC,CAAC,QAAQ,IAAI,CAAC,IAAI,SAAS,MAAM,mBAAsB,CAAC,GAEzD,UAAU,eAAe,CAAC,eAA8B,YAAY,UAAU,CAAC;AAErF,SAAA,UAAU,MAAM;AACR,UAAA,eAAe,OAAO,KAAK,CAAC,eAAe,QAAQ,UAAU,CAAC,EAAE;AAC/D,WAAA,MAAM,aAAa;EACzB,GAAA,CAAC,QAAQ,OAAO,CAAC,GAEb;AACT;"}
+{"version":3,"file":"index.js","sources":["../src/useObservable.ts","../src/useObservableEvent.ts"],"sourcesContent":["import {useMemo, useSyncExternalStore} from 'react'\nimport {\n  asapScheduler,\n  catchError,\n  finalize,\n  type Observable,\n  type ObservedValueOf,\n  of,\n  share,\n  timer,\n} from 'rxjs'\nimport {map, tap} from 'rxjs/operators'\n\nfunction getValue<T>(value: T): T extends () => infer U ? U : T {\n  return typeof value === 'function' ? value() : value\n}\n\ninterface CacheRecord<T> {\n  observable: Observable<void>\n  snapshot: T\n  error?: unknown\n}\n\nconst cache = new WeakMap<Observable<any>, CacheRecord<any>>()\n\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n  observable: ObservableType,\n  initialValue: ObservedValueOf<ObservableType> | (() => ObservedValueOf<ObservableType>),\n): ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>>(\n  observable: ObservableType,\n): undefined | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n  observable: ObservableType,\n  initialValue: InitialValue | (() => InitialValue),\n): InitialValue | ObservedValueOf<ObservableType>\n/** @public */\nexport function useObservable<ObservableType extends Observable<any>, InitialValue>(\n  observable: ObservableType,\n  initialValue?: InitialValue | (() => InitialValue),\n): InitialValue | ObservedValueOf<ObservableType> {\n  if (!cache.has(observable)) {\n    const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {\n      snapshot: getValue(initialValue) as ObservedValueOf<ObservableType>,\n    }\n    entry.observable = observable.pipe(\n      map((value) => ({snapshot: value, error: undefined})),\n      catchError((error) => of({snapshot: undefined, error})),\n      tap(({snapshot, error}) => {\n        entry.snapshot = snapshot\n        entry.error = error\n      }),\n      // Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state\n      // and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.\n      map((value) => void value),\n      // Ensure that the cache entry is deleted when the observable completes or errors.\n      finalize(() => cache.delete(observable)),\n      share({resetOnRefCountZero: () => timer(0, asapScheduler)}),\n    )\n\n    // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.\n    const subscription = entry.observable.subscribe()\n    subscription.unsubscribe()\n\n    cache.set(observable, entry as CacheRecord<ObservedValueOf<ObservableType>>)\n  }\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const instance = cache.get(observable)!\n\n  const store = useMemo(() => {\n    return {\n      subscribe: (onStoreChange: () => void) => {\n        const subscription = instance.observable.subscribe(onStoreChange)\n        return () => {\n          subscription.unsubscribe()\n        }\n      },\n      getSnapshot: () => {\n        if (instance.error) {\n          throw instance.error\n        }\n        return instance.snapshot\n      },\n    }\n  }, [instance])\n\n  return useSyncExternalStore<ObservedValueOf<ObservableType>>(\n    store.subscribe,\n    store.getSnapshot,\n    typeof initialValue === 'undefined'\n      ? undefined\n      : () => getValue(initialValue) as ObservedValueOf<ObservableType>,\n  )\n}\n","import {observableCallback} from 'observable-callback'\nimport {useEffect, useState} from 'react'\nimport {type Observable} from 'rxjs'\nimport {useEffectEvent} from 'use-effect-event'\n\n/** @public */\nexport function useObservableEvent<T, U>(\n  handleEvent: (arg: Observable<T>) => Observable<U>,\n): (arg: T) => void {\n  const [[calls$, call]] = useState(() => observableCallback<T>())\n\n  const onEvent = useEffectEvent((observable: Observable<T>) => handleEvent(observable))\n\n  useEffect(() => {\n    const subscription = calls$.pipe((observable) => onEvent(observable)).subscribe()\n    return () => subscription.unsubscribe()\n  }, [calls$, onEvent])\n\n  return call\n}\n"],"names":["getValue","value","cache","WeakMap","useObservable","observable","initialValue","$","_c","has","entry","snapshot","pipe","map","_temp","catchError","_temp2","tap","t0","error","error_0","_temp3","finalize","delete","share","resetOnRefCountZero","_temp4","subscribe","unsubscribe","set","get","instance","t1","t2","onStoreChange","subscription_0","subscription","t3","t4","getSnapshot","store","t5","undefined","useSyncExternalStore","timer","asapScheduler","value_0","of","useObservableEvent","handleEvent","useState","calls$","call","onEvent","useEffectEvent","observable_0","useEffect","observableCallback"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "3.1.3",
+  "version": "4.0.1-canary.0",
   "description": "React + RxJS = <3",
   "keywords": [
     "action",
@@ -62,52 +62,52 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "build": "pkg build --strict --clean --check",
-    "dev": "pnpm --filter 'react-rx-website' dev",
-    "format": "prettier --cache --write .",
-    "lint": "eslint --cache .",
-    "prepublishOnly": "pnpm build",
-    "test": "vitest run --typecheck",
-    "watch": "pnpm build -- --watch"
-  },
   "browserslist": "extends @sanity/browserslist-config",
   "prettier": "@sanity/prettier-config",
   "dependencies": {
     "observable-callback": "^1.0.3",
+    "react-compiler-runtime": "19.0.0-beta-6fc168f-20241025",
     "use-effect-event": "^1.0.2"
   },
   "devDependencies": {
-    "@sanity/pkg-utils": "^6.10.3",
-    "@sanity/prettier-config": "^1.0.2",
+    "@sanity/pkg-utils": "^6.11.7",
+    "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@testing-library/dom": "^10.3.1",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1",
     "@types/node": "^18.17.5",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.16.0",
-    "@typescript-eslint/parser": "^7.16.0",
-    "eslint": "^8.57.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "babel-plugin-react-compiler": "beta",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-compiler": "beta",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "jsdom": "^24.1.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-test-renderer": "^18.3.1",
     "rxjs": "^7.8.1",
-    "semantic-release": "^24.0.0",
-    "typescript": "5.5.3",
-    "vitest": "^2.0.2"
+    "semantic-release": "^24.1.0",
+    "typescript": "5.6.3",
+    "vitest": "^2.0.5"
   },
   "peerDependencies": {
-    "react": "^18.3 || >=19.0.0-rc",
+    "react": "^18.3 || >=19.0.0-0",
     "rxjs": "^7"
   },
-  "packageManager": "pnpm@9.5.0"
-}
+  "scripts": {
+    "build": "pkg build --strict --clean --check",
+    "dev": "pnpm --filter 'react-rx-website' dev",
+    "format": "prettier --cache --write .",
+    "lint": "eslint --cache .",
+    "test": "vitest run --typecheck",
+    "watch": "pnpm build -- --watch"
+  }
+}

package/src/__tests__/strictmode.test.ts

@@ -1,5 +1,5 @@
 import {act, render} from '@testing-library/react'
-import {createElement, Fragment, StrictMode, useEffect} from 'react'
+import {createElement, Fragment, StrictMode, useEffect, useMemo} from 'react'
 import {BehaviorSubject, Observable} from 'rxjs'
 import {expect, test} from 'vitest'
 
@@ -39,7 +39,7 @@ test('Strict mode should trigger double mount effects and re-renders', async ()
   expect(mountCount).toEqual(2)
 })
 
-test('Strict mode should unsubscribe the source observable on unmount', () => {
+test('Strict mode should unsubscribe the source observable on unmount', async () => {
   const subscribed: number[] = []
   const unsubscribed: number[] = []
   let nextId = 0
@@ -57,7 +57,31 @@ test('Strict mode should unsubscribe the source observable on unmount', () => {
   }
 
   const {rerender} = render(createElement(StrictMode, null, createElement(ObservableComponent)))
-  expect(subscribed).toEqual([0, 1])
+  expect(subscribed).toEqual([0])
   rerender(createElement(StrictMode, null, createElement('div')))
-  expect(unsubscribed).toEqual([0, 1])
+  await Promise.resolve()
+  expect(unsubscribed).toEqual([0])
+})
+
+test('Strict mode should unsubscribe the source observable on unmount if its created in a useMemo', async () => {
+  let subscriberCount: number = 0
+  const getObservable = () =>
+    new Observable(() => {
+      subscriberCount++
+      return () => {
+        subscriberCount--
+      }
+    })
+
+  function ObservableComponent() {
+    const memoObservable = useMemo(() => getObservable(), [])
+    useObservable(memoObservable)
+    return createElement(Fragment, null)
+  }
+
+  const {rerender} = render(createElement(StrictMode, null, createElement(ObservableComponent)))
+  expect(subscriberCount, 'Subscriber count should be 2').toBe(2)
+  rerender(createElement(StrictMode, null, createElement('div')))
+  await Promise.resolve()
+  expect(subscriberCount, 'Subscriber count should be 0').toBe(0)
 })

package/src/__tests__/useObservable.test-d.ts

@@ -22,6 +22,6 @@ test('useObservable with initial value if a different type returns a union of th
   const observable = of('foo')
 
   expectTypeOf(useObservable(observable, 1)).toEqualTypeOf<string | number>()
-
+  expectTypeOf(useObservable(observable, () => 1)).toEqualTypeOf<string | number>()
   expectTypeOf(useObservable(observable, 'foo')).toEqualTypeOf<string>()
 })

package/src/__tests__/useObservable.test.ts

@@ -6,7 +6,7 @@ import {expect, test} from 'vitest'
 
 import {useObservable} from '../useObservable'
 
-test('should subscribe immediately on component mount and unsubscribe on component unmount', () => {
+test('should subscribe immediately on component mount and unsubscribe on component unmount', async () => {
   let subscribed = false
   const observable = new Observable(() => {
     subscribed = true
@@ -21,10 +21,11 @@ test('should subscribe immediately on component mount and unsubscribe on compone
   expect(subscribed).toBe(true)
 
   unmount()
+  await Promise.resolve()
   expect(subscribed).toBe(false)
 })
 
-test('should only subscribe once when given same observable on re-renders', () => {
+test('should only subscribe once when given same observable on re-renders', async () => {
   let subscriptionCount = 0
   const observable = new Observable(() => {
     subscriptionCount++
@@ -37,6 +38,7 @@ test('should only subscribe once when given same observable on re-renders', () =
   rerender()
   expect(subscriptionCount).toBe(1)
   unmount()
+  await Promise.resolve()
 
   renderHook(() => useObservable(observable))
   expect(subscriptionCount).toBe(2)
@@ -103,7 +105,7 @@ test('should have passed initialValue as initial value from delayed observables'
   unmount()
 })
 
-test('should rerender with initial value if component unmounts and then remounts', () => {
+test('should rerender with initial value if component unmounts and then remounts', async () => {
   const values$ = new Subject<string>()
   const firstHook = renderHook(() => useObservable(values$, 'initial'))
 
@@ -113,13 +115,14 @@ test('should rerender with initial value if component unmounts and then remounts
   expect(firstHook.result.current).toBe('something')
 
   firstHook.unmount()
+  await Promise.resolve()
 
   const nextHook = renderHook(() => useObservable(values$, 'initial2'))
 
   expect(nextHook.result.current).toBe('initial2')
 })
 
-test('should share the observable between each concurrent subscribing hook', () => {
+test('should share the observable between each concurrent subscribing hook', async () => {
   let subscribeCount = 0
   const observable = new Observable<number>((subscriber) => {
     subscriber.next(subscribeCount++)
@@ -130,13 +133,14 @@ test('should share the observable between each concurrent subscribing hook', ()
   expect(secondHook.result.current).toBe(0)
   firstHook.unmount()
   secondHook.unmount()
+  await Promise.resolve()
 
   const thirdHook = renderHook(() => useObservable(observable))
   expect(thirdHook.result.current).toBe(1)
   thirdHook.unmount()
 })
 
-test('should restart any completed observable on mount', () => {
+test('should restart any completed observable on mount', async () => {
   let subscribeCount = 0
   let unsubscribeCount = 0
 
@@ -178,12 +182,15 @@ test('should restart any completed observable on mount', () => {
   expect(unsubscribeCount).toBe(1)
 
   firstHook.unmount()
+  await Promise.resolve()
 
   const secondHook = renderHook(() => useObservable(observable))
   expect(secondHook.result.current).toBe(undefined)
   expect(subscribeCount).toBe(2)
   expect(unsubscribeCount).toBe(1)
   secondHook.unmount()
+  await Promise.resolve()
+
   expect(unsubscribeCount).toBe(2)
 })
 

package/src/useObservable.ts

@@ -1,12 +1,13 @@
-import {useEffect, useMemo, useRef, useSyncExternalStore} from 'react'
+import {useMemo, useSyncExternalStore} from 'react'
 import {
+  asapScheduler,
   catchError,
   finalize,
   type Observable,
   type ObservedValueOf,
   of,
   share,
-  type Subscription,
+  timer,
 } from 'rxjs'
 import {map, tap} from 'rxjs/operators'
 
@@ -15,7 +16,6 @@ function getValue<T>(value: T): T extends () => infer U ? U : T {
 }
 
 interface CacheRecord<T> {
-  subscription: Subscription
   observable: Observable<void>
   snapshot: T
   error?: unknown
@@ -35,61 +35,45 @@ export function useObservable<ObservableType extends Observable<any>>(
 /** @public */
 export function useObservable<ObservableType extends Observable<any>, InitialValue>(
   observable: ObservableType,
-  initialValue: InitialValue,
+  initialValue: InitialValue | (() => InitialValue),
 ): InitialValue | ObservedValueOf<ObservableType>
 /** @public */
 export function useObservable<ObservableType extends Observable<any>, InitialValue>(
   observable: ObservableType,
   initialValue?: InitialValue | (() => InitialValue),
 ): InitialValue | ObservedValueOf<ObservableType> {
-  /**
-   * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.
-   * But we also don't want the initialValue to be stale if the observable changes.
-   */
-  const initialValueRef = useRef(getValue(initialValue) as ObservedValueOf<ObservableType>)
-
-  /**
-   * Ensures that the initialValue is always up-to-date in case the observable changes.
-   */
-  useEffect(() => {
-    initialValueRef.current = getValue(initialValue) as ObservedValueOf<ObservableType>
-  }, [initialValue])
+  if (!cache.has(observable)) {
+    const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {
+      snapshot: getValue(initialValue) as ObservedValueOf<ObservableType>,
+    }
+    entry.observable = observable.pipe(
+      map((value) => ({snapshot: value, error: undefined})),
+      catchError((error) => of({snapshot: undefined, error})),
+      tap(({snapshot, error}) => {
+        entry.snapshot = snapshot
+        entry.error = error
+      }),
+      // Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state
+      // and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.
+      map((value) => void value),
+      // Ensure that the cache entry is deleted when the observable completes or errors.
+      finalize(() => cache.delete(observable)),
+      share({resetOnRefCountZero: () => timer(0, asapScheduler)}),
+    )
 
-  const store = useMemo(() => {
-    if (!cache.has(observable)) {
-      const entry: Partial<CacheRecord<ObservedValueOf<ObservableType>>> = {
-        snapshot: initialValueRef.current,
-      }
-      entry.observable = observable.pipe(
-        map((value) => ({snapshot: value, error: undefined})),
-        catchError((error) => of({snapshot: undefined, error})),
-        tap(({snapshot, error}) => {
-          entry.snapshot = snapshot
-          entry.error = error
-        }),
-        // Note: any value or error emitted by the provided observable will be mapped to the cache entry's mutable state
-        // and the observable is thereafter only used as a notifier to call `onStoreChange`, hence the `void` return type.
-        map((value) => void value),
-        // Ensure that the cache entry is deleted when the observable completes or errors.
-        finalize(() => cache.delete(observable)),
-        share(),
-      )
+    // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.
+    const subscription = entry.observable.subscribe()
+    subscription.unsubscribe()
 
-      // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.
-      entry.subscription = entry.observable.subscribe()
-
-      cache.set(observable, entry as CacheRecord<ObservedValueOf<ObservableType>>)
-    }
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const instance = cache.get(observable)!
-    if (instance.subscription.closed) {
-      instance.subscription = instance.observable.subscribe()
-    }
+    cache.set(observable, entry as CacheRecord<ObservedValueOf<ObservableType>>)
+  }
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const instance = cache.get(observable)!
 
+  const store = useMemo(() => {
     return {
       subscribe: (onStoreChange: () => void) => {
         const subscription = instance.observable.subscribe(onStoreChange)
-        instance.subscription.unsubscribe()
         return () => {
           subscription.unsubscribe()
         }
@@ -101,11 +85,13 @@ export function useObservable<ObservableType extends Observable<any>, InitialVal
         return instance.snapshot
       },
     }
-  }, [observable])
+  }, [instance])
 
   return useSyncExternalStore<ObservedValueOf<ObservableType>>(
     store.subscribe,
     store.getSnapshot,
-    typeof initialValueRef.current === 'undefined' ? undefined : () => initialValueRef.current,
+    typeof initialValue === 'undefined'
+      ? undefined
+      : () => getValue(initialValue) as ObservedValueOf<ObservableType>,
   )
 }