react-rx 3.0.0-2 → 3.0.0-4

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

@@ -14,7 +14,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/dist/cjs/useObservable.d.ts

@@ -1,4 +1,4 @@
-import { Observable } from 'rxjs';
+import type { Observable } from 'rxjs';
 export declare function useObservable<ObservableType extends Observable<any>>(observable: ObservableType, initialValue?: UnboxObservable<ObservableType> | (() => UnboxObservable<ObservableType>)): UnboxObservable<ObservableType>;
-declare type UnboxObservable<T> = T extends Observable<infer U> ? U : never;
+type UnboxObservable<T> = T extends Observable<infer U> ? U : never;
 export {};

package/dist/cjs/useObservable.js

@@ -7,16 +7,6 @@ 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) {
     /**
      * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.
@@ -29,41 +19,30 @@ function useObservable(observable, initialValue) {
     (0, react_1.useEffect)(function () {
         initialValueRef.current = getValue(initialValue);
     }, [initialValue]);
-    var _a = (0, react_1.useMemo)(function () {
-        var store = getOrCreateStore(observable, initialValueRef.current);
-        if (store.subscription.closed) {
-            store.subscription = store.observable.subscribe();
+    var store = (0, react_1.useMemo)(function () {
+        if (!cache.has(observable)) {
+            var entry_1 = {
+                snapshot: initialValueRef.current,
+            };
+            entry_1.observable = observable.pipe((0, operators_1.shareReplay)({ refCount: true, bufferSize: 1 }), (0, operators_1.tap)(function (value) { return (entry_1.snapshot = value); }));
+            // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.
+            entry_1.subscription = entry_1.observable.subscribe();
+            cache.set(observable, entry_1);
         }
-        return [
-            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 () {
-                    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, initialValueRef.current);
-        if (shouldRestoreSubscriptionRef.current) {
-            if (store.subscription.closed) {
-                store.subscription = store.observable.subscribe();
-            }
-            shouldRestoreSubscriptionRef.current = false;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        var instance = cache.get(observable);
+        if (instance.subscription.closed) {
+            instance.subscription = instance.observable.subscribe();
         }
-        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();
+        return {
+            subscribe: function (onStoreChange) {
+                var subscription = instance.observable.subscribe(onStoreChange);
+                instance.subscription.unsubscribe();
+                return function () { return subscription.unsubscribe(); };
+            },
+            getSnapshot: function () { return instance.snapshot; },
         };
     }, [observable]);
-    return (0, react_1.useSyncExternalStore)(subscribe, getSnapshot);
+    return (0, react_1.useSyncExternalStore)(store.subscribe, store.getSnapshot);
 }
 exports.useObservable = useObservable;

package/dist/cjs/useObservableEvent.d.ts

@@ -1,3 +1,8 @@
 import { DependencyList } from 'react';
 import { Observable } from 'rxjs';
 export declare function useObservableCallback<T, U>(fn: (arg: Observable<T>) => Observable<U>, dependencies?: DependencyList): (arg: T) => void;
+export declare function useObservableEvent<T, U>(fn: (arg: Observable<T>) => Observable<U>): (arg: T) => void;
+/**
+ * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19
+ */
+export declare function useEffectEvent<const T extends (...args: any[]) => void>(fn: T): T;

package/dist/cjs/useObservableEvent.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useObservableCallback = void 0;
+exports.useEffectEvent = exports.useObservableEvent = exports.useObservableCallback = void 0;
 var observable_callback_1 = require("observable-callback");
 var react_1 = require("react");
 var EMPTY_DEPS = [];
@@ -21,3 +21,32 @@ function useObservableCallback(fn, dependencies) {
     return call;
 }
 exports.useObservableCallback = useObservableCallback;
+function useObservableEvent(fn) {
+    var _a = (0, react_1.useState)(function () { return (0, observable_callback_1.observableCallback)(); })[0], calls$ = _a[0], call = _a[1];
+    var callback = useEffectEvent(fn);
+    (0, react_1.useEffect)(function () {
+        var subscription = calls$.pipe(callback).subscribe();
+        return function () { return subscription.unsubscribe(); };
+    }, [callback, calls$]);
+    return call;
+}
+exports.useObservableEvent = useObservableEvent;
+/**
+ * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19
+ */
+function useEffectEvent(fn) {
+    var ref = (0, react_1.useRef)(null);
+    (0, react_1.useInsertionEffect)(function () {
+        ref.current = fn;
+    }, [fn]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (0, react_1.useCallback)(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        var f = ref.current;
+        return f.apply(void 0, args);
+    }, []);
+}
+exports.useEffectEvent = useEffectEvent;

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

@@ -11,7 +11,7 @@ import { act, render } from '@testing-library/react';
 import { createElement, Fragment, StrictMode, useEffect } from 'react';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { useObservable } from '../useObservable';
-const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+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* () {
     const subject = new BehaviorSubject(0);

package/dist/es2015/useObservable.d.ts

@@ -1,4 +1,4 @@
-import { Observable } from 'rxjs';
+import type { Observable } from 'rxjs';
 export declare function useObservable<ObservableType extends Observable<any>>(observable: ObservableType, initialValue?: UnboxObservable<ObservableType> | (() => UnboxObservable<ObservableType>)): UnboxObservable<ObservableType>;
-declare type UnboxObservable<T> = T extends Observable<infer U> ? U : never;
+type UnboxObservable<T> = T extends Observable<infer U> ? U : never;
 export {};

package/dist/es2015/useObservable.js

@@ -4,16 +4,6 @@ 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) {
     /**
      * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.
@@ -26,40 +16,29 @@ export function useObservable(observable, initialValue) {
     useEffect(() => {
         initialValueRef.current = getValue(initialValue);
     }, [initialValue]);
-    const [getSnapshot, subscribe] = useMemo(() => {
-        const store = getOrCreateStore(observable, initialValueRef.current);
-        if (store.subscription.closed) {
-            store.subscription = store.observable.subscribe();
+    const store = useMemo(() => {
+        if (!cache.has(observable)) {
+            const entry = {
+                snapshot: initialValueRef.current,
+            };
+            entry.observable = observable.pipe(shareReplay({ refCount: true, bufferSize: 1 }), tap((value) => (entry.snapshot = value)));
+            // 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);
         }
-        return [
-            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 () => {
-                    sub.unsubscribe();
-                };
-            },
-        ];
-    }, [observable]);
-    const shouldRestoreSubscriptionRef = useRef(false);
-    useEffect(() => {
-        const store = getOrCreateStore(observable, initialValueRef.current);
-        if (shouldRestoreSubscriptionRef.current) {
-            if (store.subscription.closed) {
-                store.subscription = store.observable.subscribe();
-            }
-            shouldRestoreSubscriptionRef.current = false;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const instance = cache.get(observable);
+        if (instance.subscription.closed) {
+            instance.subscription = instance.observable.subscribe();
         }
-        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();
+        return {
+            subscribe: (onStoreChange) => {
+                const subscription = instance.observable.subscribe(onStoreChange);
+                instance.subscription.unsubscribe();
+                return () => subscription.unsubscribe();
+            },
+            getSnapshot: () => instance.snapshot,
         };
     }, [observable]);
-    return useSyncExternalStore(subscribe, getSnapshot);
+    return useSyncExternalStore(store.subscribe, store.getSnapshot);
 }

package/dist/es2015/useObservableEvent.d.ts

@@ -1,3 +1,8 @@
 import { DependencyList } from 'react';
 import { Observable } from 'rxjs';
 export declare function useObservableCallback<T, U>(fn: (arg: Observable<T>) => Observable<U>, dependencies?: DependencyList): (arg: T) => void;
+export declare function useObservableEvent<T, U>(fn: (arg: Observable<T>) => Observable<U>): (arg: T) => void;
+/**
+ * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19
+ */
+export declare function useEffectEvent<const T extends (...args: any[]) => void>(fn: T): T;

package/dist/es2015/useObservableEvent.js

@@ -1,5 +1,5 @@
 import { observableCallback } from 'observable-callback';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useInsertionEffect, useRef, useState } from 'react';
 const EMPTY_DEPS = [];
 export function useObservableCallback(fn, dependencies = EMPTY_DEPS) {
     const callbackRef = useRef();
@@ -16,3 +16,26 @@ export function useObservableCallback(fn, dependencies = EMPTY_DEPS) {
     }, [calls$, call, callback]);
     return call;
 }
+export function useObservableEvent(fn) {
+    const [[calls$, call]] = useState(() => observableCallback());
+    const callback = useEffectEvent(fn);
+    useEffect(() => {
+        const subscription = calls$.pipe(callback).subscribe();
+        return () => subscription.unsubscribe();
+    }, [callback, calls$]);
+    return call;
+}
+/**
+ * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19
+ */
+export function useEffectEvent(fn) {
+    const ref = useRef(null);
+    useInsertionEffect(() => {
+        ref.current = fn;
+    }, [fn]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return useCallback((...args) => {
+        const f = ref.current;
+        return f(...args);
+    }, []);
+}

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

@@ -13,7 +13,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/dist/esm/useObservable.d.ts

@@ -1,4 +1,4 @@
-import { Observable } from 'rxjs';
+import type { Observable } from 'rxjs';
 export declare function useObservable<ObservableType extends Observable<any>>(observable: ObservableType, initialValue?: UnboxObservable<ObservableType> | (() => UnboxObservable<ObservableType>)): UnboxObservable<ObservableType>;
-declare type UnboxObservable<T> = T extends Observable<infer U> ? U : never;
+type UnboxObservable<T> = T extends Observable<infer U> ? U : never;
 export {};

package/dist/esm/useObservable.js

@@ -4,16 +4,6 @@ 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) {
     /**
      * Store the initialValue in a ref, as we don't want a changed `initialValue` to trigger a re-subscription.
@@ -26,40 +16,29 @@ export function useObservable(observable, initialValue) {
     useEffect(function () {
         initialValueRef.current = getValue(initialValue);
     }, [initialValue]);
-    var _a = useMemo(function () {
-        var store = getOrCreateStore(observable, initialValueRef.current);
-        if (store.subscription.closed) {
-            store.subscription = store.observable.subscribe();
+    var store = useMemo(function () {
+        if (!cache.has(observable)) {
+            var entry_1 = {
+                snapshot: initialValueRef.current,
+            };
+            entry_1.observable = observable.pipe(shareReplay({ refCount: true, bufferSize: 1 }), tap(function (value) { return (entry_1.snapshot = value); }));
+            // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns, and keep the observable alive until the component unmounts.
+            entry_1.subscription = entry_1.observable.subscribe();
+            cache.set(observable, entry_1);
         }
-        return [
-            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 () {
-                    sub.unsubscribe();
-                };
-            },
-        ];
-    }, [observable]), getSnapshot = _a[0], subscribe = _a[1];
-    var shouldRestoreSubscriptionRef = useRef(false);
-    useEffect(function () {
-        var store = getOrCreateStore(observable, initialValueRef.current);
-        if (shouldRestoreSubscriptionRef.current) {
-            if (store.subscription.closed) {
-                store.subscription = store.observable.subscribe();
-            }
-            shouldRestoreSubscriptionRef.current = false;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        var instance = cache.get(observable);
+        if (instance.subscription.closed) {
+            instance.subscription = instance.observable.subscribe();
         }
-        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();
+        return {
+            subscribe: function (onStoreChange) {
+                var subscription = instance.observable.subscribe(onStoreChange);
+                instance.subscription.unsubscribe();
+                return function () { return subscription.unsubscribe(); };
+            },
+            getSnapshot: function () { return instance.snapshot; },
         };
     }, [observable]);
-    return useSyncExternalStore(subscribe, getSnapshot);
+    return useSyncExternalStore(store.subscribe, store.getSnapshot);
 }

package/dist/esm/useObservableEvent.d.ts

@@ -1,3 +1,8 @@
 import { DependencyList } from 'react';
 import { Observable } from 'rxjs';
 export declare function useObservableCallback<T, U>(fn: (arg: Observable<T>) => Observable<U>, dependencies?: DependencyList): (arg: T) => void;
+export declare function useObservableEvent<T, U>(fn: (arg: Observable<T>) => Observable<U>): (arg: T) => void;
+/**
+ * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19
+ */
+export declare function useEffectEvent<const T extends (...args: any[]) => void>(fn: T): T;

package/dist/esm/useObservableEvent.js

@@ -1,5 +1,5 @@
 import { observableCallback } from 'observable-callback';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useInsertionEffect, useRef, useState } from 'react';
 var EMPTY_DEPS = [];
 export function useObservableCallback(fn, dependencies) {
     if (dependencies === void 0) { dependencies = EMPTY_DEPS; }
@@ -17,3 +17,30 @@ export function useObservableCallback(fn, dependencies) {
     }, [calls$, call, callback]);
     return call;
 }
+export function useObservableEvent(fn) {
+    var _a = useState(function () { return observableCallback(); })[0], calls$ = _a[0], call = _a[1];
+    var callback = useEffectEvent(fn);
+    useEffect(function () {
+        var subscription = calls$.pipe(callback).subscribe();
+        return function () { return subscription.unsubscribe(); };
+    }, [callback, calls$]);
+    return call;
+}
+/**
+ * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19
+ */
+export function useEffectEvent(fn) {
+    var ref = useRef(null);
+    useInsertionEffect(function () {
+        ref.current = fn;
+    }, [fn]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return useCallback(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        var f = ref.current;
+        return f.apply(void 0, args);
+    }, []);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "3.0.0-2",
+  "version": "3.0.0-4",
   "description": "React + RxJS = <3",
   "keywords": [
     "action",
@@ -69,39 +69,40 @@
     "test": "jest",
     "lint": "eslint --cache ."
   },
+  "prettier": "@sanity/prettier-config",
   "dependencies": {
     "observable-callback": "^1.0.3"
   },
   "devDependencies": {
+    "@sanity/prettier-config": "^1.0.2",
     "@sanity/semantic-release-preset": "^2.0.5",
-    "@testing-library/dom": "^8.20.1",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.3",
     "@types/node": "^18.17.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "7.12.0",
-    "@typescript-eslint/parser": "7.12.0",
-    "eslint": "8.57.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-react": "7.34.2",
-    "eslint-plugin-react-compiler": "^0.0.0-experimental-51a85ea-20240601",
-    "eslint-plugin-react-hooks": "4.6.2",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "jsdom": "^20.0.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
-    "prettier-plugin-packagejson": "^2.4.5",
+    "prettier": "^3.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-test-renderer": "^18.3.1",
     "rimraf": "^3.0.2",
     "rxjs": "^7.8.1",
     "ts-jest": "^29.1.1",
-    "typescript": "4.7.4"
+    "typescript": "5.4.5"
   },
   "peerDependencies": {
     "react": "^18.3 || >=19.0.0-rc",

package/src/__tests__/strictmode.test.ts

@@ -4,7 +4,7 @@ import {BehaviorSubject, Observable} from 'rxjs'
 
 import {useObservable} from '../useObservable'
 
-const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
 // NOTE: Jest runs NODE_ENV=test by default, which enables development flags for React
 

package/src/useObservable.ts

@@ -1,33 +1,17 @@
 import {useEffect, useMemo, useRef, useSyncExternalStore} from 'react'
-import {Observable, Subscription} from 'rxjs'
+import type {Observable, Subscription} from 'rxjs'
 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
+  snapshot: 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<ObservableType extends Observable<any>>(
   observable: ObservableType,
@@ -37,56 +21,47 @@ export function useObservable<ObservableType extends Observable<any>>(
    * 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))
+  const initialValueRef = useRef(getValue(initialValue) as UnboxObservable<ObservableType>)
 
   /**
    * Ensures that the initialValue is always up-to-date in case the observable changes.
    */
   useEffect(() => {
-    initialValueRef.current = getValue(initialValue)
+    initialValueRef.current = getValue(initialValue) as UnboxObservable<ObservableType>
   }, [initialValue])
 
-  const [getSnapshot, subscribe] = useMemo<
-    [() => UnboxObservable<ObservableType>, Parameters<typeof useSyncExternalStore>[0]]
-  >(() => {
-    const store = getOrCreateStore(observable, initialValueRef.current)
-    if (store.subscription.closed) {
-      store.subscription = store.observable.subscribe()
-    }
-    return [
-      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 () => {
-          sub.unsubscribe()
-        }
-      },
-    ]
-  }, [observable])
-
-  const shouldRestoreSubscriptionRef = useRef(false)
-  useEffect(() => {
-    const store = getOrCreateStore(observable, initialValueRef.current)
-    if (shouldRestoreSubscriptionRef.current) {
-      if (store.subscription.closed) {
-        store.subscription = store.observable.subscribe()
+  const store = useMemo(() => {
+    if (!cache.has(observable)) {
+      const entry: Partial<CacheRecord<UnboxObservable<ObservableType>>> = {
+        snapshot: initialValueRef.current,
       }
-      shouldRestoreSubscriptionRef.current = false
+      entry.observable = observable.pipe(
+        shareReplay({refCount: true, bufferSize: 1}),
+        tap((value) => (entry.snapshot = value)),
+      )
+
+      // 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<UnboxObservable<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()
     }
 
-    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()
+    return {
+      subscribe: (onStoreChange: () => void) => {
+        const subscription = instance.observable.subscribe(onStoreChange)
+        instance.subscription.unsubscribe()
+        return () => subscription.unsubscribe()
+      },
+      getSnapshot: () => instance.snapshot,
     }
   }, [observable])
 
-  return useSyncExternalStore<UnboxObservable<ObservableType>>(subscribe, getSnapshot)
+  return useSyncExternalStore<UnboxObservable<ObservableType>>(store.subscribe, store.getSnapshot)
 }
 
 type UnboxObservable<T> = T extends Observable<infer U> ? U : never

package/src/useObservableEvent.ts

@@ -1,5 +1,5 @@
 import {observableCallback} from 'observable-callback'
-import {DependencyList, useCallback, useEffect, useRef} from 'react'
+import {DependencyList, useCallback, useEffect, useInsertionEffect, useRef, useState} from 'react'
 import {Observable} from 'rxjs'
 
 const EMPTY_DEPS: DependencyList = []
@@ -27,3 +27,38 @@ export function useObservableCallback<T, U>(
 
   return call
 }
+
+export function useObservableEvent<T, U>(
+  fn: (arg: Observable<T>) => Observable<U>,
+): (arg: T) => void {
+  const [[calls$, call]] = useState(() => observableCallback<T>())
+
+  const callback = useEffectEvent(fn)
+
+  useEffect(() => {
+    const subscription = calls$.pipe(callback).subscribe()
+    return () => subscription.unsubscribe()
+  }, [callback, calls$])
+
+  return call
+}
+
+/**
+ * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19
+ */
+export function useEffectEvent<
+  const T extends (
+    ...args: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    any[]
+  ) => void,
+>(fn: T): T {
+  const ref = useRef<T | null>(null)
+  useInsertionEffect(() => {
+    ref.current = fn
+  }, [fn])
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return useCallback((...args: any[]) => {
+    const f = ref.current!
+    return f(...args)
+  }, []) as T
+}