react-rx 2.0.4 → 2.1.0

package/dist/cjs/useAsObservable.js

@@ -3,7 +3,6 @@ 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 setup = (0, react_1.useCallback)(function () {
@@ -16,18 +15,28 @@ function useAsObservable(value, operator) {
         ref.current = setup();
     }
     var observable = ref.current[0];
-    (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
+    (0, react_1.useEffect)(function () {
         if (!ref.current) {
             return;
         }
         var _a = ref.current, subject = _a[1];
         subject.next(value);
     }, [value, ref]);
-    (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
+    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;

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

@@ -4,7 +4,6 @@ exports.useMemoObservable = exports.useObservable = void 0;
 var react_1 = require("react");
 var shim_1 = require("use-sync-external-store/shim");
 var operators_1 = require("rxjs/operators");
-var useIsomorphicEffect_1 = require("./useIsomorphicEffect");
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
@@ -13,6 +12,7 @@ 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);
     }
@@ -20,22 +20,38 @@ function getOrCreateStore(inputObservable, initialValue) {
 }
 function useObservable(observable, initialValue) {
     var _a = (0, react_1.useMemo)(function () {
-        var record = getOrCreateStore(observable, getValue(initialValue));
+        var store = getOrCreateStore(observable, getValue(initialValue));
+        if (store.subscription.closed) {
+            store.subscription = store.observable.subscribe();
+        }
         return [
             function getSnapshot() {
-                return record.currentValue;
+                // @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) {
-                var sub = record.observable.subscribe(function (next) { return callback(next); });
+                // @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 () {
                     sub.unsubscribe();
                 };
             },
         ];
     }, [observable]), getSnapshot = _a[0], subscribe = _a[1];
-    (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
+    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 () {
-            getOrCreateStore(observable, getValue(initialValue)).subscription.unsubscribe();
+            // 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);

package/dist/es2015/useAsObservable.js

@@ -1,6 +1,5 @@
 import { BehaviorSubject } from 'rxjs';
-import { useCallback, useRef } from 'react';
-import { useIsomorphicEffect } from './useIsomorphicEffect';
+import { useCallback, useEffect, useRef } from 'react';
 import { distinctUntilChanged } from 'rxjs/operators';
 export function useAsObservable(value, operator) {
     const setup = useCallback(() => {
@@ -13,18 +12,28 @@ export function useAsObservable(value, operator) {
         ref.current = setup();
     }
     const [observable] = ref.current;
-    useIsomorphicEffect(() => {
+    useEffect(() => {
         if (!ref.current) {
             return;
         }
         const [, subject] = ref.current;
         subject.next(value);
     }, [value, ref]);
-    useIsomorphicEffect(() => {
+    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;

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,7 +1,6 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { shareReplay, tap } from 'rxjs/operators';
-import { useIsomorphicEffect } from './useIsomorphicEffect';
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
@@ -10,6 +9,7 @@ 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);
     }
@@ -17,22 +17,38 @@ function getOrCreateStore(inputObservable, initialValue) {
 }
 export function useObservable(observable, initialValue) {
     const [getSnapshot, subscribe] = useMemo(() => {
-        const record = getOrCreateStore(observable, getValue(initialValue));
+        const store = getOrCreateStore(observable, getValue(initialValue));
+        if (store.subscription.closed) {
+            store.subscription = store.observable.subscribe();
+        }
         return [
             function getSnapshot() {
-                return record.currentValue;
+                // @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) {
-                const sub = record.observable.subscribe(next => callback(next));
+                // @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 () => {
                     sub.unsubscribe();
                 };
             },
         ];
     }, [observable]);
-    useIsomorphicEffect(() => {
+    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 () => {
-            getOrCreateStore(observable, getValue(initialValue)).subscription.unsubscribe();
+            // 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/dist/esm/useAsObservable.js

@@ -1,6 +1,5 @@
 import { BehaviorSubject } from 'rxjs';
-import { useCallback, useRef } from 'react';
-import { useIsomorphicEffect } from './useIsomorphicEffect';
+import { useCallback, useEffect, useRef } from 'react';
 import { distinctUntilChanged } from 'rxjs/operators';
 export function useAsObservable(value, operator) {
     var setup = useCallback(function () {
@@ -13,18 +12,28 @@ export function useAsObservable(value, operator) {
         ref.current = setup();
     }
     var observable = ref.current[0];
-    useIsomorphicEffect(function () {
+    useEffect(function () {
         if (!ref.current) {
             return;
         }
         var _a = ref.current, subject = _a[1];
         subject.next(value);
     }, [value, ref]);
-    useIsomorphicEffect(function () {
+    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;

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,7 +1,6 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { shareReplay, tap } from 'rxjs/operators';
-import { useIsomorphicEffect } from './useIsomorphicEffect';
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
@@ -10,6 +9,7 @@ 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);
     }
@@ -17,22 +17,38 @@ function getOrCreateStore(inputObservable, initialValue) {
 }
 export function useObservable(observable, initialValue) {
     var _a = useMemo(function () {
-        var record = getOrCreateStore(observable, getValue(initialValue));
+        var store = getOrCreateStore(observable, getValue(initialValue));
+        if (store.subscription.closed) {
+            store.subscription = store.observable.subscribe();
+        }
         return [
             function getSnapshot() {
-                return record.currentValue;
+                // @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) {
-                var sub = record.observable.subscribe(function (next) { return callback(next); });
+                // @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 () {
                     sub.unsubscribe();
                 };
             },
         ];
     }, [observable]), getSnapshot = _a[0], subscribe = _a[1];
-    useIsomorphicEffect(function () {
+    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 () {
-            getOrCreateStore(observable, getValue(initialValue)).subscription.unsubscribe();
+            // 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "React + RxJS = <3",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",

package/src/useAsObservable.ts

@@ -1,6 +1,5 @@
 import {BehaviorSubject, Observable} from 'rxjs'
-import {useCallback, useRef} from 'react'
-import {useIsomorphicEffect} from './useIsomorphicEffect'
+import {useCallback, useEffect, useRef} from 'react'
 import {distinctUntilChanged} from 'rxjs/operators'
 
 /**
@@ -33,7 +32,7 @@ export function useAsObservable<T, K = T>(
 
   const [observable] = ref.current
 
-  useIsomorphicEffect(() => {
+  useEffect(() => {
     if (!ref.current) {
       return
     }
@@ -41,11 +40,22 @@ export function useAsObservable<T, K = T>(
     subject.next(value)
   }, [value, ref])
 
-  useIsomorphicEffect(() => {
+  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

package/src/useObservable.ts

@@ -1,8 +1,7 @@
 import {Observable, Subscription} from 'rxjs'
-import {DependencyList, useMemo} from 'react'
+import {DependencyList, useEffect, useMemo, useRef} from 'react'
 import {useSyncExternalStore} from 'use-sync-external-store/shim'
 import {shareReplay, tap} from 'rxjs/operators'
-import {useIsomorphicEffect} from './useIsomorphicEffect'
 
 function getValue<T>(value: T): T extends () => infer U ? U : T {
   return typeof value === 'function' ? value() : value
@@ -22,25 +21,34 @@ function getOrCreateStore<T>(inputObservable: Observable<T>, initialValue: T) {
       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)
+  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(() => {
-    const record = getOrCreateStore(observable, getValue(initialValue))!
+  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 [
       function getSnapshot() {
-        return record.currentValue
+        // @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: (value: T) => void) {
-        const sub = record.observable.subscribe(next => callback(next))
+      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 () => {
           sub.unsubscribe()
         }
@@ -48,9 +56,21 @@ export function useObservable<T>(observable: Observable<T>, initialValue?: T | (
     ]
   }, [observable])
 
-  useIsomorphicEffect(() => {
+  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 () => {
-      getOrCreateStore(observable, getValue(initialValue))!.subscription.unsubscribe()
+      // 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])