react-rx 2.1.3 → 3.0.0-1

package/dist/cjs/__tests__/strictmode.test.js

@@ -36,23 +36,22 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@testing-library/react");
+var react_2 = require("react");
 var rxjs_1 = require("rxjs");
 var useObservable_1 = require("../useObservable");
-var react_1 = require("react");
-var react_2 = require("@testing-library/react");
-var useAsObservable_1 = require("../useAsObservable");
 var wait = function (ms) { return new Promise(function (resolve) { return setTimeout(resolve, ms); }); };
 // NOTE: Jest runs NODE_ENV=test by default, which enables development flags for React
 test('Strict mode should trigger double mount effects and re-renders', function () { return __awaiter(void 0, void 0, void 0, function () {
     function ObservableComponent() {
-        (0, react_1.useEffect)(function () {
+        (0, react_2.useEffect)(function () {
             mountCount++;
         }, []);
         var observedValue = (0, useObservable_1.useObservable)(observable);
         returnedValues.push(observedValue);
-        return (0, react_1.createElement)(react_1.Fragment, null, observedValue);
+        return (0, react_2.createElement)(react_2.Fragment, null, observedValue);
     }
-    var subject, observable, returnedValues, mountCount, rerender;
+    var subject, observable, returnedValues, mountCount;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -60,15 +59,15 @@ test('Strict mode should trigger double mount effects and re-renders', function
                 observable = subject.asObservable();
                 returnedValues = [];
                 mountCount = 0;
-                rerender = (0, react_2.render)((0, react_1.createElement)(react_1.StrictMode, null, (0, react_1.createElement)(ObservableComponent))).rerender;
+                (0, react_1.render)((0, react_2.createElement)(react_2.StrictMode, null, (0, react_2.createElement)(ObservableComponent)));
                 expect(mountCount).toEqual(2);
                 expect(returnedValues).toEqual([0, 0]);
                 return [4 /*yield*/, wait(10)];
             case 1:
                 _a.sent();
-                (0, react_2.act)(function () { return subject.next(1); });
+                (0, react_1.act)(function () { return subject.next(1); });
                 expect(returnedValues).toEqual([0, 0, 1, 1]);
-                (0, react_2.act)(function () { return subject.next(2); });
+                (0, react_1.act)(function () { return subject.next(2); });
                 expect(returnedValues).toEqual([0, 0, 1, 1, 2, 2]);
                 expect(mountCount).toEqual(2);
                 return [2 /*return*/];
@@ -76,36 +75,22 @@ test('Strict mode should trigger double mount effects and re-renders', function
     });
 }); });
 test('Strict mode should unsubscribe the source observable on unmount', function () {
-    var subscribed = false;
+    var subscribed = [];
+    var unsubscribed = [];
+    var nextId = 0;
     var observable = new rxjs_1.Observable(function () {
-        subscribed = true;
+        var id = nextId++;
+        subscribed.push(id);
         return function () {
-            subscribed = false;
+            unsubscribed.push(id);
         };
     });
     function ObservableComponent() {
         (0, useObservable_1.useObservable)(observable);
-        return (0, react_1.createElement)(react_1.Fragment, null);
+        return (0, react_2.createElement)(react_2.Fragment, null);
     }
-    var rerender = (0, react_2.render)((0, react_1.createElement)(react_1.StrictMode, null, (0, react_1.createElement)(ObservableComponent))).rerender;
-    expect(subscribed).toBe(true);
-    rerender((0, react_1.createElement)(react_1.StrictMode, null, (0, react_1.createElement)('div')));
-    expect(subscribed).toBe(false);
+    var rerender = (0, react_1.render)((0, react_2.createElement)(react_2.StrictMode, null, (0, react_2.createElement)(ObservableComponent))).rerender;
+    expect(subscribed).toEqual([0, 1]);
+    rerender((0, react_2.createElement)(react_2.StrictMode, null, (0, react_2.createElement)('div')));
+    expect(unsubscribed).toEqual([0, 1]);
 });
-test('useAsObservable should work in strict mode', function () { return __awaiter(void 0, void 0, void 0, function () {
-    function ObservableComponent(props) {
-        var count$ = (0, useAsObservable_1.useAsObservable)(props.count);
-        var count = (0, useObservable_1.useObservable)(count$);
-        returnedValues.push(count);
-        return (0, react_1.createElement)(react_1.Fragment, null, 'ok');
-    }
-    var returnedValues, rerender;
-    return __generator(this, function (_a) {
-        returnedValues = [];
-        rerender = (0, react_2.render)((0, react_1.createElement)(react_1.StrictMode, null, (0, react_1.createElement)(ObservableComponent, { count: 0 }))).rerender;
-        expect(returnedValues).toEqual([0, 0]);
-        rerender((0, react_1.createElement)(react_1.StrictMode, null, (0, react_1.createElement)(ObservableComponent, { count: 1 })));
-        expect(returnedValues).toEqual([0, 0, 0, 0, 1, 1]);
-        return [2 /*return*/];
-    });
-}); });

package/dist/cjs/__tests__/useObservable.test.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("@testing-library/react");
-var useObservable_1 = require("../useObservable");
+var react_2 = require("react");
 var rxjs_1 = require("rxjs");
 var operators_1 = require("rxjs/operators");
-var react_2 = require("react");
+var useObservable_1 = require("../useObservable");
 test('should subscribe immediately on component mount and unsubscribe on component unmount', function () {
     var subscribed = false;
     var observable = new rxjs_1.Observable(function () {

package/dist/cjs/index.d.ts

@@ -1,7 +1,2 @@
-export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { observeState, observeCallback, observeContext, observeElement } from './utils';
-export { observeState as state, observeCallback as handler, observeContext as context, observeElement as elementRef, } from './utils';
-export { observableCallback } from 'observable-callback';
-export { useObservable, useMemoObservable } from './useObservable';
-export { useAsObservable } from './useAsObservable';
-export { useObservableCallback } from './useObservableCallback';
+export * from './useObservable';
+export * from './useObservableEvent';

package/dist/cjs/index.js

@@ -1,28 +1,18 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useObservableCallback = exports.useAsObservable = exports.useMemoObservable = exports.useObservable = exports.observableCallback = exports.elementRef = exports.context = exports.handler = exports.state = exports.observeElement = exports.observeContext = exports.observeCallback = exports.observeState = exports.forwardRef = exports.rxComponent = exports.reactiveComponent = void 0;
-// Main package exports
-var reactiveComponent_1 = require("./reactiveComponent");
-Object.defineProperty(exports, "reactiveComponent", { enumerable: true, get: function () { return reactiveComponent_1.reactiveComponent; } });
-Object.defineProperty(exports, "rxComponent", { enumerable: true, get: function () { return reactiveComponent_1.reactiveComponent; } });
-Object.defineProperty(exports, "forwardRef", { enumerable: true, get: function () { return reactiveComponent_1.forwardRef; } });
-var utils_1 = require("./utils");
-Object.defineProperty(exports, "observeState", { enumerable: true, get: function () { return utils_1.observeState; } });
-Object.defineProperty(exports, "observeCallback", { enumerable: true, get: function () { return utils_1.observeCallback; } });
-Object.defineProperty(exports, "observeContext", { enumerable: true, get: function () { return utils_1.observeContext; } });
-Object.defineProperty(exports, "observeElement", { enumerable: true, get: function () { return utils_1.observeElement; } });
-var utils_2 = require("./utils");
-Object.defineProperty(exports, "state", { enumerable: true, get: function () { return utils_2.observeState; } });
-Object.defineProperty(exports, "handler", { enumerable: true, get: function () { return utils_2.observeCallback; } });
-Object.defineProperty(exports, "context", { enumerable: true, get: function () { return utils_2.observeContext; } });
-Object.defineProperty(exports, "elementRef", { enumerable: true, get: function () { return utils_2.observeElement; } });
-var observable_callback_1 = require("observable-callback");
-Object.defineProperty(exports, "observableCallback", { enumerable: true, get: function () { return observable_callback_1.observableCallback; } });
-// hooks
-var useObservable_1 = require("./useObservable");
-Object.defineProperty(exports, "useObservable", { enumerable: true, get: function () { return useObservable_1.useObservable; } });
-Object.defineProperty(exports, "useMemoObservable", { enumerable: true, get: function () { return useObservable_1.useMemoObservable; } });
-var useAsObservable_1 = require("./useAsObservable");
-Object.defineProperty(exports, "useAsObservable", { enumerable: true, get: function () { return useAsObservable_1.useAsObservable; } });
-var useObservableCallback_1 = require("./useObservableCallback");
-Object.defineProperty(exports, "useObservableCallback", { enumerable: true, get: function () { return useObservableCallback_1.useObservableCallback; } });
+__exportStar(require("./useObservable"), exports);
+__exportStar(require("./useObservableEvent"), exports);

package/dist/cjs/useObservable.d.ts

@@ -1,7 +1,4 @@
 import { Observable } from 'rxjs';
-import { DependencyList } from 'react';
 export declare function useObservable<T>(observable: Observable<T>): T | undefined;
 export declare function useObservable<T>(observable: Observable<T>, initialValue: T): T;
 export declare function useObservable<T>(observable: Observable<T>, initialValue: () => T): T;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList): T | undefined;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList, initialValue: T | (() => T)): T;

package/dist/cjs/useObservable.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMemoObservable = exports.useObservable = void 0;
+exports.useObservable = void 0;
 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;
@@ -19,8 +18,19 @@ function getOrCreateStore(inputObservable, initialValue) {
     return cache.get(inputObservable);
 }
 function useObservable(observable, initialValue) {
+    /**
+     * 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.
+     */
+    var initialValueRef = (0, react_1.useRef)(getValue(initialValue));
+    /**
+     * Ensures that the initialValue is always up-to-date in case the observable changes.
+     */
+    (0, react_1.useEffect)(function () {
+        initialValueRef.current = getValue(initialValue);
+    }, [initialValue]);
     var _a = (0, react_1.useMemo)(function () {
-        var store = getOrCreateStore(observable, getValue(initialValue));
+        var store = getOrCreateStore(observable, initialValueRef.current);
         if (store.subscription.closed) {
             store.subscription = store.observable.subscribe();
         }
@@ -40,7 +50,7 @@ function useObservable(observable, initialValue) {
     }, [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));
+        var store = getOrCreateStore(observable, initialValueRef.current);
         if (shouldRestoreSubscriptionRef.current) {
             if (store.subscription.closed) {
                 store.subscription = store.observable.subscribe();
@@ -54,10 +64,6 @@ function useObservable(observable, initialValue) {
             store.subscription.unsubscribe();
         };
     }, [observable]);
-    return (0, shim_1.useSyncExternalStore)(subscribe, getSnapshot);
+    return (0, react_1.useSyncExternalStore)(subscribe, getSnapshot);
 }
 exports.useObservable = useObservable;
-function useMemoObservable(observableOrFactory, deps, initialValue) {
-    return useObservable((0, react_1.useMemo)(function () { return getValue(observableOrFactory); }, deps), initialValue);
-}
-exports.useMemoObservable = useMemoObservable;

package/dist/cjs/{useObservableCallback.js → useObservableEvent.js}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useObservableCallback = void 0;
-var react_1 = require("react");
 var observable_callback_1 = require("observable-callback");
+var react_1 = require("react");
 var EMPTY_DEPS = [];
 function useObservableCallback(fn, dependencies) {
     if (dependencies === void 0) { dependencies = EMPTY_DEPS; }
@@ -11,7 +11,6 @@ function useObservableCallback(fn, dependencies) {
         callbackRef.current = (0, observable_callback_1.observableCallback)();
     }
     var _a = callbackRef.current, calls$ = _a[0], call = _a[1];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     var callback = (0, react_1.useCallback)(fn, dependencies);
     (0, react_1.useEffect)(function () {
         var subscription = calls$.pipe(callback).subscribe();

package/dist/es2015/__tests__/strictmode.test.js

@@ -7,11 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { act, render } from '@testing-library/react';
+import { createElement, Fragment, StrictMode, useEffect } from 'react';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { useObservable } from '../useObservable';
-import { createElement, Fragment, StrictMode, useEffect } from 'react';
-import { act, render } from '@testing-library/react';
-import { useAsObservable } from '../useAsObservable';
 const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 // NOTE: Jest runs NODE_ENV=test by default, which enables development flags for React
 test('Strict mode should trigger double mount effects and re-renders', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -27,7 +26,7 @@ test('Strict mode should trigger double mount effects and re-renders', () => __a
         returnedValues.push(observedValue);
         return createElement(Fragment, null, observedValue);
     }
-    const { rerender } = render(createElement(StrictMode, null, createElement(ObservableComponent)));
+    render(createElement(StrictMode, null, createElement(ObservableComponent)));
     expect(mountCount).toEqual(2);
     expect(returnedValues).toEqual([0, 0]);
     yield wait(10);
@@ -38,11 +37,14 @@ test('Strict mode should trigger double mount effects and re-renders', () => __a
     expect(mountCount).toEqual(2);
 }));
 test('Strict mode should unsubscribe the source observable on unmount', () => {
-    let subscribed = false;
+    const subscribed = [];
+    const unsubscribed = [];
+    let nextId = 0;
     const observable = new Observable(() => {
-        subscribed = true;
+        const id = nextId++;
+        subscribed.push(id);
         return () => {
-            subscribed = false;
+            unsubscribed.push(id);
         };
     });
     function ObservableComponent() {
@@ -50,20 +52,7 @@ test('Strict mode should unsubscribe the source observable on unmount', () => {
         return createElement(Fragment, null);
     }
     const { rerender } = render(createElement(StrictMode, null, createElement(ObservableComponent)));
-    expect(subscribed).toBe(true);
+    expect(subscribed).toEqual([0, 1]);
     rerender(createElement(StrictMode, null, createElement('div')));
-    expect(subscribed).toBe(false);
+    expect(unsubscribed).toEqual([0, 1]);
 });
-test('useAsObservable should work in strict mode', () => __awaiter(void 0, void 0, void 0, function* () {
-    const returnedValues = [];
-    function ObservableComponent(props) {
-        const count$ = useAsObservable(props.count);
-        const count = useObservable(count$);
-        returnedValues.push(count);
-        return createElement(Fragment, null, 'ok');
-    }
-    const { rerender } = render(createElement(StrictMode, null, createElement(ObservableComponent, { count: 0 })));
-    expect(returnedValues).toEqual([0, 0]);
-    rerender(createElement(StrictMode, null, createElement(ObservableComponent, { count: 1 })));
-    expect(returnedValues).toEqual([0, 0, 0, 0, 1, 1]);
-}));

package/dist/es2015/__tests__/useObservable.test.js

@@ -1,8 +1,8 @@
 import { act, render, renderHook } from '@testing-library/react';
-import { useObservable } from '../useObservable';
+import { createElement, Fragment } from 'react';
 import { asyncScheduler, Observable, of, scheduled, Subject, timer } from 'rxjs';
 import { mapTo } from 'rxjs/operators';
-import { createElement, Fragment } from 'react';
+import { useObservable } from '../useObservable';
 test('should subscribe immediately on component mount and unsubscribe on component unmount', () => {
     let subscribed = false;
     const observable = new Observable(() => {

package/dist/es2015/index.d.ts

@@ -1,7 +1,2 @@
-export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { observeState, observeCallback, observeContext, observeElement } from './utils';
-export { observeState as state, observeCallback as handler, observeContext as context, observeElement as elementRef, } from './utils';
-export { observableCallback } from 'observable-callback';
-export { useObservable, useMemoObservable } from './useObservable';
-export { useAsObservable } from './useAsObservable';
-export { useObservableCallback } from './useObservableCallback';
+export * from './useObservable';
+export * from './useObservableEvent';

package/dist/es2015/index.js

@@ -1,9 +1,2 @@
-// Main package exports
-export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { observeState, observeCallback, observeContext, observeElement } from './utils';
-export { observeState as state, observeCallback as handler, observeContext as context, observeElement as elementRef, } from './utils';
-export { observableCallback } from 'observable-callback';
-// hooks
-export { useObservable, useMemoObservable } from './useObservable';
-export { useAsObservable } from './useAsObservable';
-export { useObservableCallback } from './useObservableCallback';
+export * from './useObservable';
+export * from './useObservableEvent';

package/dist/es2015/useObservable.d.ts

@@ -1,7 +1,4 @@
 import { Observable } from 'rxjs';
-import { DependencyList } from 'react';
 export declare function useObservable<T>(observable: Observable<T>): T | undefined;
 export declare function useObservable<T>(observable: Observable<T>, initialValue: T): T;
 export declare function useObservable<T>(observable: Observable<T>, initialValue: () => T): T;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList): T | undefined;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList, initialValue: T | (() => T)): T;

package/dist/es2015/useObservable.js

@@ -1,5 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
 import { shareReplay, tap } from 'rxjs/operators';
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
@@ -16,8 +15,19 @@ function getOrCreateStore(inputObservable, initialValue) {
     return cache.get(inputObservable);
 }
 export function useObservable(observable, initialValue) {
+    /**
+     * 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));
+    /**
+     * Ensures that the initialValue is always up-to-date in case the observable changes.
+     */
+    useEffect(() => {
+        initialValueRef.current = getValue(initialValue);
+    }, [initialValue]);
     const [getSnapshot, subscribe] = useMemo(() => {
-        const store = getOrCreateStore(observable, getValue(initialValue));
+        const store = getOrCreateStore(observable, initialValueRef.current);
         if (store.subscription.closed) {
             store.subscription = store.observable.subscribe();
         }
@@ -37,7 +47,7 @@ export function useObservable(observable, initialValue) {
     }, [observable]);
     const shouldRestoreSubscriptionRef = useRef(false);
     useEffect(() => {
-        const store = getOrCreateStore(observable, getValue(initialValue));
+        const store = getOrCreateStore(observable, initialValueRef.current);
         if (shouldRestoreSubscriptionRef.current) {
             if (store.subscription.closed) {
                 store.subscription = store.observable.subscribe();
@@ -53,6 +63,3 @@ export function useObservable(observable, initialValue) {
     }, [observable]);
     return useSyncExternalStore(subscribe, getSnapshot);
 }
-export function useMemoObservable(observableOrFactory, deps, initialValue) {
-    return useObservable(useMemo(() => getValue(observableOrFactory), deps), initialValue);
-}

package/dist/es2015/{useObservableCallback.js → useObservableEvent.js}

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useRef } from 'react';
 import { observableCallback } from 'observable-callback';
+import { useCallback, useEffect, useRef } from 'react';
 const EMPTY_DEPS = [];
 export function useObservableCallback(fn, dependencies = EMPTY_DEPS) {
     const callbackRef = useRef();
@@ -7,7 +7,6 @@ export function useObservableCallback(fn, dependencies = EMPTY_DEPS) {
         callbackRef.current = observableCallback();
     }
     const [calls$, call] = callbackRef.current;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     const callback = useCallback(fn, dependencies);
     useEffect(() => {
         const subscription = calls$.pipe(callback).subscribe();

package/dist/esm/__tests__/strictmode.test.js

@@ -34,11 +34,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+import { act, render } from '@testing-library/react';
+import { createElement, Fragment, StrictMode, useEffect } from 'react';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { useObservable } from '../useObservable';
-import { createElement, Fragment, StrictMode, useEffect } from 'react';
-import { act, render } from '@testing-library/react';
-import { useAsObservable } from '../useAsObservable';
 var wait = function (ms) { return new Promise(function (resolve) { return setTimeout(resolve, ms); }); };
 // NOTE: Jest runs NODE_ENV=test by default, which enables development flags for React
 test('Strict mode should trigger double mount effects and re-renders', function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -50,7 +49,7 @@ test('Strict mode should trigger double mount effects and re-renders', function
         returnedValues.push(observedValue);
         return createElement(Fragment, null, observedValue);
     }
-    var subject, observable, returnedValues, mountCount, rerender;
+    var subject, observable, returnedValues, mountCount;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -58,7 +57,7 @@ test('Strict mode should trigger double mount effects and re-renders', function
                 observable = subject.asObservable();
                 returnedValues = [];
                 mountCount = 0;
-                rerender = render(createElement(StrictMode, null, createElement(ObservableComponent))).rerender;
+                render(createElement(StrictMode, null, createElement(ObservableComponent)));
                 expect(mountCount).toEqual(2);
                 expect(returnedValues).toEqual([0, 0]);
                 return [4 /*yield*/, wait(10)];
@@ -74,11 +73,14 @@ test('Strict mode should trigger double mount effects and re-renders', function
     });
 }); });
 test('Strict mode should unsubscribe the source observable on unmount', function () {
-    var subscribed = false;
+    var subscribed = [];
+    var unsubscribed = [];
+    var nextId = 0;
     var observable = new Observable(function () {
-        subscribed = true;
+        var id = nextId++;
+        subscribed.push(id);
         return function () {
-            subscribed = false;
+            unsubscribed.push(id);
         };
     });
     function ObservableComponent() {
@@ -86,24 +88,7 @@ test('Strict mode should unsubscribe the source observable on unmount', function
         return createElement(Fragment, null);
     }
     var rerender = render(createElement(StrictMode, null, createElement(ObservableComponent))).rerender;
-    expect(subscribed).toBe(true);
+    expect(subscribed).toEqual([0, 1]);
     rerender(createElement(StrictMode, null, createElement('div')));
-    expect(subscribed).toBe(false);
+    expect(unsubscribed).toEqual([0, 1]);
 });
-test('useAsObservable should work in strict mode', function () { return __awaiter(void 0, void 0, void 0, function () {
-    function ObservableComponent(props) {
-        var count$ = useAsObservable(props.count);
-        var count = useObservable(count$);
-        returnedValues.push(count);
-        return createElement(Fragment, null, 'ok');
-    }
-    var returnedValues, rerender;
-    return __generator(this, function (_a) {
-        returnedValues = [];
-        rerender = render(createElement(StrictMode, null, createElement(ObservableComponent, { count: 0 }))).rerender;
-        expect(returnedValues).toEqual([0, 0]);
-        rerender(createElement(StrictMode, null, createElement(ObservableComponent, { count: 1 })));
-        expect(returnedValues).toEqual([0, 0, 0, 0, 1, 1]);
-        return [2 /*return*/];
-    });
-}); });

package/dist/esm/__tests__/useObservable.test.js

@@ -1,8 +1,8 @@
 import { act, render, renderHook } from '@testing-library/react';
-import { useObservable } from '../useObservable';
+import { createElement, Fragment } from 'react';
 import { asyncScheduler, Observable, of, scheduled, Subject, timer } from 'rxjs';
 import { mapTo } from 'rxjs/operators';
-import { createElement, Fragment } from 'react';
+import { useObservable } from '../useObservable';
 test('should subscribe immediately on component mount and unsubscribe on component unmount', function () {
     var subscribed = false;
     var observable = new Observable(function () {

package/dist/esm/index.d.ts

@@ -1,7 +1,2 @@
-export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { observeState, observeCallback, observeContext, observeElement } from './utils';
-export { observeState as state, observeCallback as handler, observeContext as context, observeElement as elementRef, } from './utils';
-export { observableCallback } from 'observable-callback';
-export { useObservable, useMemoObservable } from './useObservable';
-export { useAsObservable } from './useAsObservable';
-export { useObservableCallback } from './useObservableCallback';
+export * from './useObservable';
+export * from './useObservableEvent';

package/dist/esm/index.js

@@ -1,9 +1,2 @@
-// Main package exports
-export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { observeState, observeCallback, observeContext, observeElement } from './utils';
-export { observeState as state, observeCallback as handler, observeContext as context, observeElement as elementRef, } from './utils';
-export { observableCallback } from 'observable-callback';
-// hooks
-export { useObservable, useMemoObservable } from './useObservable';
-export { useAsObservable } from './useAsObservable';
-export { useObservableCallback } from './useObservableCallback';
+export * from './useObservable';
+export * from './useObservableEvent';

package/dist/esm/useObservable.d.ts

@@ -1,7 +1,4 @@
 import { Observable } from 'rxjs';
-import { DependencyList } from 'react';
 export declare function useObservable<T>(observable: Observable<T>): T | undefined;
 export declare function useObservable<T>(observable: Observable<T>, initialValue: T): T;
 export declare function useObservable<T>(observable: Observable<T>, initialValue: () => T): T;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList): T | undefined;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList, initialValue: T | (() => T)): T;

package/dist/esm/useObservable.js

@@ -1,5 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
 import { shareReplay, tap } from 'rxjs/operators';
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
@@ -16,8 +15,19 @@ function getOrCreateStore(inputObservable, initialValue) {
     return cache.get(inputObservable);
 }
 export function useObservable(observable, initialValue) {
+    /**
+     * 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.
+     */
+    var initialValueRef = useRef(getValue(initialValue));
+    /**
+     * Ensures that the initialValue is always up-to-date in case the observable changes.
+     */
+    useEffect(function () {
+        initialValueRef.current = getValue(initialValue);
+    }, [initialValue]);
     var _a = useMemo(function () {
-        var store = getOrCreateStore(observable, getValue(initialValue));
+        var store = getOrCreateStore(observable, initialValueRef.current);
         if (store.subscription.closed) {
             store.subscription = store.observable.subscribe();
         }
@@ -37,7 +47,7 @@ export function useObservable(observable, initialValue) {
     }, [observable]), getSnapshot = _a[0], subscribe = _a[1];
     var shouldRestoreSubscriptionRef = useRef(false);
     useEffect(function () {
-        var store = getOrCreateStore(observable, getValue(initialValue));
+        var store = getOrCreateStore(observable, initialValueRef.current);
         if (shouldRestoreSubscriptionRef.current) {
             if (store.subscription.closed) {
                 store.subscription = store.observable.subscribe();
@@ -53,6 +63,3 @@ export function useObservable(observable, initialValue) {
     }, [observable]);
     return useSyncExternalStore(subscribe, getSnapshot);
 }
-export function useMemoObservable(observableOrFactory, deps, initialValue) {
-    return useObservable(useMemo(function () { return getValue(observableOrFactory); }, deps), initialValue);
-}

package/dist/esm/{useObservableCallback.js → useObservableEvent.js}

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useRef } from 'react';
 import { observableCallback } from 'observable-callback';
+import { useCallback, useEffect, useRef } from 'react';
 var EMPTY_DEPS = [];
 export function useObservableCallback(fn, dependencies) {
     if (dependencies === void 0) { dependencies = EMPTY_DEPS; }
@@ -8,7 +8,6 @@ export function useObservableCallback(fn, dependencies) {
         callbackRef.current = observableCallback();
     }
     var _a = callbackRef.current, calls$ = _a[0], call = _a[1];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     var callback = useCallback(fn, dependencies);
     useEffect(function () {
         var subscription = calls$.pipe(callback).subscribe();