react-rx 2.0.3 → 2.1.0

package/.idea/vcs.xml

@@ -1,9 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$/../../_/parcel-transformer-mdx-with-toc" vcs="Git" />
-    <mapping directory="$PROJECT_DIR$/../react-repl" vcs="Git" />
     <mapping directory="$PROJECT_DIR$" vcs="Git" />
-    <mapping directory="$PROJECT_DIR$/../react-rx.dev" vcs="Git" />
   </component>
 </project>

package/dist/cjs/reactiveComponent.d.ts

@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
 import { FunctionComponent, ReactNode, Ref } from 'react';
 declare type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>;
-export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<{}>;
+export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<Props>;
 export declare function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>;
 declare type ForwardRefComponent<RefType, Props> = (input$: Observable<Props>, ref: Ref<RefType>) => Observable<ReactNode>;
 export declare function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Props> & import("react").RefAttributes<RefType>>;

package/dist/cjs/useAsObservable.js

@@ -3,19 +3,43 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAsObservable = void 0;
 var rxjs_1 = require("rxjs");
 var react_1 = require("react");
-var useIsomorphicEffect_1 = require("./useIsomorphicEffect");
+var operators_1 = require("rxjs/operators");
 function useAsObservable(value, operator) {
-    var _a = (0, react_1.useMemo)(function () {
+    var setup = (0, react_1.useCallback)(function () {
         var subject = new rxjs_1.BehaviorSubject(value);
-        var observable = subject.asObservable();
+        var observable = subject.asObservable().pipe((0, operators_1.distinctUntilChanged)());
         return [operator ? observable.pipe(operator) : observable, subject];
-    }, []), observable = _a[0], subject = _a[1];
-    (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
+    }, []);
+    var ref = (0, react_1.useRef)();
+    if (!ref.current) {
+        ref.current = setup();
+    }
+    var observable = ref.current[0];
+    (0, react_1.useEffect)(function () {
+        if (!ref.current) {
+            return;
+        }
+        var _a = ref.current, subject = _a[1];
         subject.next(value);
-    }, [value]);
+    }, [value, ref]);
+    var shouldRestoreSubscriptionRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(function () {
+        if (shouldRestoreSubscriptionRef.current) {
+            if (!ref.current) {
+                ref.current = setup();
+            }
+            shouldRestoreSubscriptionRef.current = false;
+        }
         return function () {
+            if (!ref.current) {
+                return;
+            }
+            // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
+            // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
+            shouldRestoreSubscriptionRef.current = true;
+            var _a = ref.current, subject = _a[1];
             subject.complete();
+            ref.current = undefined;
         };
     }, []);
     return observable;

package/dist/cjs/useIsomorphicEffect.d.ts

@@ -1,2 +1,2 @@
-import { useLayoutEffect } from 'react';
-export declare const useIsomorphicEffect: typeof useLayoutEffect;
+import { useEffect } from 'react';
+export declare const useIsomorphicEffect: typeof useEffect;

package/dist/cjs/useObservable.js

@@ -1,31 +1,59 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMemoObservable = exports.useObservable = void 0;
-var rxjs_1 = require("rxjs");
 var react_1 = require("react");
 var shim_1 = require("use-sync-external-store/shim");
+var operators_1 = require("rxjs/operators");
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
+var cache = new WeakMap();
+function getOrCreateStore(inputObservable, initialValue) {
+    if (!cache.has(inputObservable)) {
+        var entry_1 = { currentValue: initialValue };
+        entry_1.observable = inputObservable.pipe((0, operators_1.shareReplay)({ refCount: true, bufferSize: 1 }), (0, operators_1.tap)(function (value) { return (entry_1.currentValue = value); }));
+        // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns
+        entry_1.subscription = entry_1.observable.subscribe();
+        cache.set(inputObservable, entry_1);
+    }
+    return cache.get(inputObservable);
+}
 function useObservable(observable, initialValue) {
     var _a = (0, react_1.useMemo)(function () {
-        var currentValue = getValue(initialValue);
-        var subject = new rxjs_1.Subject();
-        var subscription = observable.subscribe(function (value) {
-            currentValue = value;
-            subject.next(value);
-        });
+        var store = getOrCreateStore(observable, getValue(initialValue));
+        if (store.subscription.closed) {
+            store.subscription = store.observable.subscribe();
+        }
         return [
-            function () { return currentValue; },
-            function (callback) {
-                var subjectSub = subject.subscribe(function (value) { return callback(value); });
+            function getSnapshot() {
+                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here to clear up some memory, as this subscription is only needed to provide a sync initialValue.
+                return store.currentValue;
+            },
+            function subscribe(callback) {
+                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here as we only need 1 subscription active to keep the observer alive
+                var sub = store.observable.subscribe(callback);
                 return function () {
-                    subscription.unsubscribe();
-                    subjectSub.unsubscribe();
+                    sub.unsubscribe();
                 };
             },
         ];
     }, [observable]), getSnapshot = _a[0], subscribe = _a[1];
+    var shouldRestoreSubscriptionRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(function () {
+        var store = getOrCreateStore(observable, getValue(initialValue));
+        if (shouldRestoreSubscriptionRef.current) {
+            if (store.subscription.closed) {
+                store.subscription = store.observable.subscribe();
+            }
+            shouldRestoreSubscriptionRef.current = false;
+        }
+        return function () {
+            // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
+            // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
+            shouldRestoreSubscriptionRef.current = !store.subscription.closed;
+            store.subscription.unsubscribe();
+        };
+    }, [observable]);
     return (0, shim_1.useSyncExternalStore)(subscribe, getSnapshot);
 }
 exports.useObservable = useObservable;

package/dist/es2015/reactiveComponent.d.ts

@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
 import { FunctionComponent, ReactNode, Ref } from 'react';
 declare type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>;
-export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<{}>;
+export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<Props>;
 export declare function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>;
 declare type ForwardRefComponent<RefType, Props> = (input$: Observable<Props>, ref: Ref<RefType>) => Observable<ReactNode>;
 export declare function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Props> & import("react").RefAttributes<RefType>>;

package/dist/es2015/useAsObservable.js

@@ -1,18 +1,42 @@
 import { BehaviorSubject } from 'rxjs';
-import { useEffect, useMemo } from 'react';
-import { useIsomorphicEffect } from './useIsomorphicEffect';
+import { useCallback, useEffect, useRef } from 'react';
+import { distinctUntilChanged } from 'rxjs/operators';
 export function useAsObservable(value, operator) {
-    const [observable, subject] = useMemo(() => {
+    const setup = useCallback(() => {
         const subject = new BehaviorSubject(value);
-        const observable = subject.asObservable();
+        const observable = subject.asObservable().pipe(distinctUntilChanged());
         return [operator ? observable.pipe(operator) : observable, subject];
     }, []);
-    useIsomorphicEffect(() => {
+    const ref = useRef();
+    if (!ref.current) {
+        ref.current = setup();
+    }
+    const [observable] = ref.current;
+    useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const [, subject] = ref.current;
         subject.next(value);
-    }, [value]);
+    }, [value, ref]);
+    const shouldRestoreSubscriptionRef = useRef(false);
     useEffect(() => {
+        if (shouldRestoreSubscriptionRef.current) {
+            if (!ref.current) {
+                ref.current = setup();
+            }
+            shouldRestoreSubscriptionRef.current = false;
+        }
         return () => {
+            if (!ref.current) {
+                return;
+            }
+            // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
+            // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
+            shouldRestoreSubscriptionRef.current = true;
+            const [, subject] = ref.current;
             subject.complete();
+            ref.current = undefined;
         };
     }, []);
     return observable;

package/dist/es2015/useIsomorphicEffect.d.ts

@@ -1,2 +1,2 @@
-import { useLayoutEffect } from 'react';
-export declare const useIsomorphicEffect: typeof useLayoutEffect;
+import { useEffect } from 'react';
+export declare const useIsomorphicEffect: typeof useEffect;

package/dist/es2015/useObservable.js

@@ -1,28 +1,56 @@
-import { Subject } from 'rxjs';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { shareReplay, tap } from 'rxjs/operators';
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
+const cache = new WeakMap();
+function getOrCreateStore(inputObservable, initialValue) {
+    if (!cache.has(inputObservable)) {
+        const entry = { currentValue: initialValue };
+        entry.observable = inputObservable.pipe(shareReplay({ refCount: true, bufferSize: 1 }), tap(value => (entry.currentValue = value)));
+        // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns
+        entry.subscription = entry.observable.subscribe();
+        cache.set(inputObservable, entry);
+    }
+    return cache.get(inputObservable);
+}
 export function useObservable(observable, initialValue) {
     const [getSnapshot, subscribe] = useMemo(() => {
-        let currentValue = getValue(initialValue);
-        const subject = new Subject();
-        const subscription = observable.subscribe(value => {
-            currentValue = value;
-            subject.next(value);
-        });
+        const store = getOrCreateStore(observable, getValue(initialValue));
+        if (store.subscription.closed) {
+            store.subscription = store.observable.subscribe();
+        }
         return [
-            () => currentValue,
-            (callback) => {
-                const subjectSub = subject.subscribe(value => callback(value));
+            function getSnapshot() {
+                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here to clear up some memory, as this subscription is only needed to provide a sync initialValue.
+                return store.currentValue;
+            },
+            function subscribe(callback) {
+                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here as we only need 1 subscription active to keep the observer alive
+                const sub = store.observable.subscribe(callback);
                 return () => {
-                    subscription.unsubscribe();
-                    subjectSub.unsubscribe();
+                    sub.unsubscribe();
                 };
             },
         ];
     }, [observable]);
+    const shouldRestoreSubscriptionRef = useRef(false);
+    useEffect(() => {
+        const store = getOrCreateStore(observable, getValue(initialValue));
+        if (shouldRestoreSubscriptionRef.current) {
+            if (store.subscription.closed) {
+                store.subscription = store.observable.subscribe();
+            }
+            shouldRestoreSubscriptionRef.current = false;
+        }
+        return () => {
+            // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
+            // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
+            shouldRestoreSubscriptionRef.current = !store.subscription.closed;
+            store.subscription.unsubscribe();
+        };
+    }, [observable]);
     return useSyncExternalStore(subscribe, getSnapshot);
 }
 export function useMemoObservable(observableOrFactory, deps, initialValue) {

package/dist/esm/reactiveComponent.d.ts

@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
 import { FunctionComponent, ReactNode, Ref } from 'react';
 declare type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>;
-export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<{}>;
+export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<Props>;
 export declare function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>;
 declare type ForwardRefComponent<RefType, Props> = (input$: Observable<Props>, ref: Ref<RefType>) => Observable<ReactNode>;
 export declare function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Props> & import("react").RefAttributes<RefType>>;

package/dist/esm/useAsObservable.js

@@ -1,18 +1,42 @@
 import { BehaviorSubject } from 'rxjs';
-import { useEffect, useMemo } from 'react';
-import { useIsomorphicEffect } from './useIsomorphicEffect';
+import { useCallback, useEffect, useRef } from 'react';
+import { distinctUntilChanged } from 'rxjs/operators';
 export function useAsObservable(value, operator) {
-    var _a = useMemo(function () {
+    var setup = useCallback(function () {
         var subject = new BehaviorSubject(value);
-        var observable = subject.asObservable();
+        var observable = subject.asObservable().pipe(distinctUntilChanged());
         return [operator ? observable.pipe(operator) : observable, subject];
-    }, []), observable = _a[0], subject = _a[1];
-    useIsomorphicEffect(function () {
+    }, []);
+    var ref = useRef();
+    if (!ref.current) {
+        ref.current = setup();
+    }
+    var observable = ref.current[0];
+    useEffect(function () {
+        if (!ref.current) {
+            return;
+        }
+        var _a = ref.current, subject = _a[1];
         subject.next(value);
-    }, [value]);
+    }, [value, ref]);
+    var shouldRestoreSubscriptionRef = useRef(false);
     useEffect(function () {
+        if (shouldRestoreSubscriptionRef.current) {
+            if (!ref.current) {
+                ref.current = setup();
+            }
+            shouldRestoreSubscriptionRef.current = false;
+        }
         return function () {
+            if (!ref.current) {
+                return;
+            }
+            // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
+            // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
+            shouldRestoreSubscriptionRef.current = true;
+            var _a = ref.current, subject = _a[1];
             subject.complete();
+            ref.current = undefined;
         };
     }, []);
     return observable;

package/dist/esm/useIsomorphicEffect.d.ts

@@ -1,2 +1,2 @@
-import { useLayoutEffect } from 'react';
-export declare const useIsomorphicEffect: typeof useLayoutEffect;
+import { useEffect } from 'react';
+export declare const useIsomorphicEffect: typeof useEffect;

package/dist/esm/useObservable.js

@@ -1,28 +1,56 @@
-import { Subject } from 'rxjs';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { shareReplay, tap } from 'rxjs/operators';
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
+var cache = new WeakMap();
+function getOrCreateStore(inputObservable, initialValue) {
+    if (!cache.has(inputObservable)) {
+        var entry_1 = { currentValue: initialValue };
+        entry_1.observable = inputObservable.pipe(shareReplay({ refCount: true, bufferSize: 1 }), tap(function (value) { return (entry_1.currentValue = value); }));
+        // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns
+        entry_1.subscription = entry_1.observable.subscribe();
+        cache.set(inputObservable, entry_1);
+    }
+    return cache.get(inputObservable);
+}
 export function useObservable(observable, initialValue) {
     var _a = useMemo(function () {
-        var currentValue = getValue(initialValue);
-        var subject = new Subject();
-        var subscription = observable.subscribe(function (value) {
-            currentValue = value;
-            subject.next(value);
-        });
+        var store = getOrCreateStore(observable, getValue(initialValue));
+        if (store.subscription.closed) {
+            store.subscription = store.observable.subscribe();
+        }
         return [
-            function () { return currentValue; },
-            function (callback) {
-                var subjectSub = subject.subscribe(function (value) { return callback(value); });
+            function getSnapshot() {
+                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here to clear up some memory, as this subscription is only needed to provide a sync initialValue.
+                return store.currentValue;
+            },
+            function subscribe(callback) {
+                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here as we only need 1 subscription active to keep the observer alive
+                var sub = store.observable.subscribe(callback);
                 return function () {
-                    subscription.unsubscribe();
-                    subjectSub.unsubscribe();
+                    sub.unsubscribe();
                 };
             },
         ];
     }, [observable]), getSnapshot = _a[0], subscribe = _a[1];
+    var shouldRestoreSubscriptionRef = useRef(false);
+    useEffect(function () {
+        var store = getOrCreateStore(observable, getValue(initialValue));
+        if (shouldRestoreSubscriptionRef.current) {
+            if (store.subscription.closed) {
+                store.subscription = store.observable.subscribe();
+            }
+            shouldRestoreSubscriptionRef.current = false;
+        }
+        return function () {
+            // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
+            // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
+            shouldRestoreSubscriptionRef.current = !store.subscription.closed;
+            store.subscription.unsubscribe();
+        };
+    }, [observable]);
     return useSyncExternalStore(subscribe, getSnapshot);
 }
 export function useMemoObservable(observableOrFactory, deps, initialValue) {

package/jest.config.ts

@@ -0,0 +1,14 @@
+export default {
+  preset: 'ts-jest',
+  // verbose: true,
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
+  globals: {
+    'ts-jest': {
+      warnOnly: true,
+    },
+  },
+  rootDir: 'src',
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "React + RxJS = <3",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -30,12 +30,11 @@
     "rxjs": "^6.5 || ^7"
   },
   "devDependencies": {
-    "@testing-library/dom": "^7.29.6",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/react-hooks": "^5.0.3",
-    "@types/jest": "^26.0.20",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
+    "@testing-library/dom": "^8.14.0",
+    "@testing-library/react": "^13.3.0",
+    "@types/jest": "^28.1.4",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@types/use-sync-external-store": "^0.0.3",
     "@typescript-eslint/eslint-plugin": "^4.15.2",
     "@typescript-eslint/parser": "^4.15.2",
@@ -43,16 +42,17 @@
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
-    "jest": "^26.6.3",
-    "jsdom": "^16.4.0",
+    "jest": "^28.1.2",
+    "jest-environment-jsdom": "^28.1.2",
+    "jsdom": "^20.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "2.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-test-renderer": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "rimraf": "^3.0.2",
     "rxjs": "^6.5.5",
-    "ts-jest": "^26.5.2",
+    "ts-jest": "^28.0.5",
     "typescript": "^4.2.2"
   },
   "repository": {

package/src/reactiveComponent.ts

@@ -26,16 +26,16 @@ function fromComponent<Props>(component: Component<Props>): FunctionComponent<Pr
   return wrappedComponent
 }
 
-function fromObservable<Props>(input$: Observable<Props>): FunctionComponent<{}> {
+function fromObservable<Props>(input$: Observable<ReactNode>): FunctionComponent<{}> {
   return function ReactiveComponent() {
     return createElement(Fragment, null, useObservable<ReactNode>(input$))
   }
 }
 
-export function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<{}>
+export function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<Props>
 export function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>
 export function reactiveComponent<Props>(
-  observableOrComponent: Observable<Props> | Component<Props>,
+  observableOrComponent: Observable<ReactNode> | Component<Props>,
 ) {
   return typeof observableOrComponent === 'function'
     ? fromComponent(observableOrComponent)

package/src/useAsObservable.ts

@@ -1,6 +1,6 @@
 import {BehaviorSubject, Observable} from 'rxjs'
-import {useEffect, useMemo} from 'react'
-import {useIsomorphicEffect} from './useIsomorphicEffect'
+import {useCallback, useEffect, useRef} from 'react'
+import {distinctUntilChanged} from 'rxjs/operators'
 
 /**
  * React hook to convert any props or state value into an observable
@@ -17,22 +17,49 @@ export function useAsObservable<T, K = T>(
   value: T,
   operator?: (input: Observable<T>) => Observable<K>,
 ): Observable<T | K> {
-  const [observable, subject] = useMemo(() => {
+  const setup = useCallback((): [Observable<T | K>, BehaviorSubject<T>] => {
     const subject = new BehaviorSubject(value)
 
-    const observable = subject.asObservable()
+    const observable = subject.asObservable().pipe(distinctUntilChanged())
     return [operator ? observable.pipe(operator) : observable, subject]
   }, [])
 
-  useIsomorphicEffect(() => {
+  const ref = useRef<[Observable<T | K>, BehaviorSubject<T>]>()
+
+  if (!ref.current) {
+    ref.current = setup()
+  }
+
+  const [observable] = ref.current
+
+  useEffect(() => {
+    if (!ref.current) {
+      return
+    }
+    const [, subject] = ref.current
     subject.next(value)
-  }, [value])
+  }, [value, ref])
 
+  const shouldRestoreSubscriptionRef = useRef(false)
   useEffect(() => {
+    if (shouldRestoreSubscriptionRef.current) {
+      if (!ref.current) {
+        ref.current = setup()
+      }
+      shouldRestoreSubscriptionRef.current = false
+    }
+
     return () => {
+      if (!ref.current) {
+        return
+      }
+      // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
+      // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
+      shouldRestoreSubscriptionRef.current = true
+      const [, subject] = ref.current
       subject.complete()
+      ref.current = undefined
     }
   }, [])
-
   return observable
 }

package/src/useObservable.ts

@@ -1,33 +1,79 @@
-import {Observable, Subject, Subscription} from 'rxjs'
-import {DependencyList, useMemo, useRef} from 'react'
+import {Observable, Subscription} from 'rxjs'
+import {DependencyList, useEffect, useMemo, useRef} from 'react'
 import {useSyncExternalStore} from 'use-sync-external-store/shim'
+import {shareReplay, tap} from 'rxjs/operators'
 
 function getValue<T>(value: T): T extends () => infer U ? U : T {
   return typeof value === 'function' ? value() : value
 }
 
+interface CacheRecord<T> {
+  subscription: Subscription
+  observable: Observable<T>
+  currentValue: T
+}
+
+const cache = new WeakMap<Observable<any>, CacheRecord<any>>()
+function getOrCreateStore<T>(inputObservable: Observable<T>, initialValue: T) {
+  if (!cache.has(inputObservable)) {
+    const entry: Partial<CacheRecord<T>> = {currentValue: initialValue}
+    entry.observable = inputObservable.pipe(
+      shareReplay({refCount: true, bufferSize: 1}),
+      tap(value => (entry.currentValue = value)),
+    )
+
+    // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns
+    entry.subscription = entry.observable.subscribe()
+
+    cache.set(inputObservable, entry as CacheRecord<T>)
+  }
+  return cache.get(inputObservable)!
+}
+
 export function useObservable<T>(observable: Observable<T>): T | undefined
 export function useObservable<T>(observable: Observable<T>, initialValue: T): T
 export function useObservable<T>(observable: Observable<T>, initialValue: () => T): T
 export function useObservable<T>(observable: Observable<T>, initialValue?: T | (() => T)) {
-  const [getSnapshot, subscribe] = useMemo(() => {
-    let currentValue = getValue(initialValue)
-    const subject = new Subject<T>()
-    const subscription = observable.subscribe(value => {
-      currentValue = value
-      subject.next(value)
-    })
+  const [getSnapshot, subscribe] = useMemo<
+    [() => T, Parameters<typeof useSyncExternalStore>[0]]
+  >(() => {
+    const store = getOrCreateStore(observable, getValue(initialValue))
+    if (store.subscription.closed) {
+      store.subscription = store.observable.subscribe()
+    }
     return [
-      () => currentValue,
-      (callback: (value: T) => void) => {
-        const subjectSub = subject.subscribe(value => callback(value))
+      function getSnapshot() {
+        // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here to clear up some memory, as this subscription is only needed to provide a sync initialValue.
+        return store.currentValue
+      },
+      function subscribe(callback: () => void) {
+        // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here as we only need 1 subscription active to keep the observer alive
+        const sub = store.observable.subscribe(callback)
         return () => {
-          subscription.unsubscribe()
-          subjectSub.unsubscribe()
+          sub.unsubscribe()
         }
       },
     ]
   }, [observable])
+
+  const shouldRestoreSubscriptionRef = useRef(false)
+  useEffect(() => {
+    const store = getOrCreateStore(observable, getValue(initialValue))
+    if (shouldRestoreSubscriptionRef.current) {
+      if (store.subscription.closed) {
+        store.subscription = store.observable.subscribe()
+      }
+      shouldRestoreSubscriptionRef.current = false
+    }
+
+    return () => {
+      // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
+      // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
+      shouldRestoreSubscriptionRef.current = !store.subscription.closed
+      store.subscription.unsubscribe()
+    }
+  }, [observable])
+
   return useSyncExternalStore(subscribe, getSnapshot)
 }
 

package/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "include": ["src/**/*"],
   "compilerOptions": {
+    "target": "ES2015",
     "strict": true,
     "outDir": "dist",
     "jsx": "react",