react-rx 2.0.2 → 2.0.3

package/dist/cjs/useObservable.js

@@ -1,6 +1,7 @@
 "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");
 function getValue(value) {
@@ -9,14 +10,19 @@ function getValue(value) {
 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);
+        });
         return [
             function () { return currentValue; },
             function (callback) {
-                var subscription = observable.subscribe(function (value) {
-                    currentValue = value;
-                    callback(value);
-                });
-                return function () { return subscription.unsubscribe(); };
+                var subjectSub = subject.subscribe(function (value) { return callback(value); });
+                return function () {
+                    subscription.unsubscribe();
+                    subjectSub.unsubscribe();
+                };
             },
         ];
     }, [observable]), getSnapshot = _a[0], subscribe = _a[1];

package/dist/es2015/useObservable.js

@@ -1,3 +1,4 @@
+import { Subject } from 'rxjs';
 import { useMemo } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 function getValue(value) {
@@ -6,14 +7,19 @@ function getValue(value) {
 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);
+        });
         return [
             () => currentValue,
             (callback) => {
-                const subscription = observable.subscribe(value => {
-                    currentValue = value;
-                    callback(value);
-                });
-                return () => subscription.unsubscribe();
+                const subjectSub = subject.subscribe(value => callback(value));
+                return () => {
+                    subscription.unsubscribe();
+                    subjectSub.unsubscribe();
+                };
             },
         ];
     }, [observable]);

package/dist/esm/useObservable.js

@@ -1,3 +1,4 @@
+import { Subject } from 'rxjs';
 import { useMemo } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 function getValue(value) {
@@ -6,14 +7,19 @@ function getValue(value) {
 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);
+        });
         return [
             function () { return currentValue; },
             function (callback) {
-                var subscription = observable.subscribe(function (value) {
-                    currentValue = value;
-                    callback(value);
-                });
-                return function () { return subscription.unsubscribe(); };
+                var subjectSub = subject.subscribe(function (value) { return callback(value); });
+                return function () {
+                    subscription.unsubscribe();
+                    subjectSub.unsubscribe();
+                };
             },
         ];
     }, [observable]), getSnapshot = _a[0], subscribe = _a[1];

package/package.json

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

package/src/useObservable.ts

@@ -1,5 +1,5 @@
-import {Observable} from 'rxjs'
-import {DependencyList, useMemo} from 'react'
+import {Observable, Subject, Subscription} from 'rxjs'
+import {DependencyList, useMemo, useRef} from 'react'
 import {useSyncExternalStore} from 'use-sync-external-store/shim'
 
 function getValue<T>(value: T): T extends () => infer U ? U : T {
@@ -12,14 +12,19 @@ export function useObservable<T>(observable: Observable<T>, initialValue: () =>
 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)
+    })
     return [
       () => currentValue,
       (callback: (value: T) => void) => {
-        const subscription = observable.subscribe(value => {
-          currentValue = value
-          callback(value)
-        })
-        return () => subscription.unsubscribe()
+        const subjectSub = subject.subscribe(value => callback(value))
+        return () => {
+          subscription.unsubscribe()
+          subjectSub.unsubscribe()
+        }
       },
     ]
   }, [observable])