@kuindji/reactive 1.0.23 → 1.1.0

package/dist/react/useEventBus.js

@@ -1,17 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEventBus = useEventBus;
-const react_1 = require("react");
-const eventBus_1 = require("../eventBus");
-const ErrorBoundary_1 = require("./ErrorBoundary");
-function useEventBus(eventBusOptions, allEventsListener, errorListener) {
-    const boundaryErrorListener = (0, react_1.useContext)(ErrorBoundary_1.ErrorBoundaryContext);
-    const updateRef = (0, react_1.useRef)(0);
-    const errorListenerRef = (0, react_1.useRef)(errorListener || null);
-    const allEventsListenerRef = (0, react_1.useRef)(allEventsListener || null);
-    const boundaryErrorListenerRef = (0, react_1.useRef)(boundaryErrorListener || null);
-    const eventBus = (0, react_1.useMemo)(() => {
-        const eventBus = (0, eventBus_1.createEventBus)(eventBusOptions);
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { createEventBus, } from "../eventBus.js";
+import { ErrorBoundaryContext } from "./ErrorBoundary.js";
+import { areEventBusOptionsEqual } from "./listenerOptionsEqual.js";
+export function useEventBus(eventBusOptions, allEventsListener, errorListener) {
+    const boundaryErrorListener = useContext(ErrorBoundaryContext);
+    const committedOptionsRef = useRef(eventBusOptions);
+    const errorListenerRef = useRef(errorListener || null);
+    const allEventsListenerRef = useRef(allEventsListener || null);
+    const boundaryErrorListenerRef = useRef(boundaryErrorListener || null);
+    const eventBus = useMemo(() => {
+        const eventBus = createEventBus(eventBusOptions);
         if (allEventsListener) {
             eventBus.addAllEventsListener(allEventsListener);
         }
@@ -23,15 +21,19 @@ function useEventBus(eventBusOptions, allEventsListener, errorListener) {
         }
         return eventBus;
     }, []);
-    (0, react_1.useEffect)(() => {
-        if (eventBusOptions) {
-            if (updateRef.current > 0) {
-                throw new Error("EventBus options can't be updated");
-            }
-            updateRef.current++;
+    // Reconcile event bus options across renders instead of throwing. Present
+    // entries are applied via event.setOptions; a removed event-name entry
+    // leaves the existing event unchanged.
+    useEffect(() => {
+        if (committedOptionsRef.current === eventBusOptions) {
+            return;
+        }
+        if (!areEventBusOptionsEqual(committedOptionsRef.current, eventBusOptions)) {
+            eventBus.setOptions(eventBusOptions);
         }
-    }, [eventBusOptions]);
-    (0, react_1.useEffect)(() => {
+        committedOptionsRef.current = eventBusOptions;
+    });
+    useEffect(() => {
         if (allEventsListenerRef.current !== allEventsListener) {
             if (allEventsListenerRef.current) {
                 eventBus.removeAllEventsListener(allEventsListenerRef.current);
@@ -42,7 +44,7 @@ function useEventBus(eventBusOptions, allEventsListener, errorListener) {
             }
         }
     }, [allEventsListener]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (errorListenerRef.current !== errorListener) {
             if (errorListenerRef.current) {
                 eventBus.removeErrorListener(errorListenerRef.current);
@@ -53,7 +55,7 @@ function useEventBus(eventBusOptions, allEventsListener, errorListener) {
             }
         }
     }, [errorListener]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (boundaryErrorListenerRef.current !== boundaryErrorListener) {
             if (boundaryErrorListenerRef.current) {
                 eventBus.removeErrorListener(boundaryErrorListenerRef.current);
@@ -65,7 +67,7 @@ function useEventBus(eventBusOptions, allEventsListener, errorListener) {
             }
         }
     }, [boundaryErrorListener]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         return () => {
             if (allEventsListenerRef.current) {
                 eventBus.removeAllEventsListener(allEventsListenerRef.current);
@@ -79,7 +81,6 @@ function useEventBus(eventBusOptions, allEventsListener, errorListener) {
                 eventBus.removeErrorListener(boundaryErrorListenerRef.current);
                 boundaryErrorListenerRef.current = null;
             }
-            updateRef.current = 0;
         };
     }, []);
     return eventBus;

package/dist/react/useListenToAction.d.ts

@@ -1,3 +1,3 @@
-import type { BaseAction } from "../action";
+import type { BaseAction } from "../action.js";
 export type { BaseAction };
 export declare function useListenToAction<TAction extends BaseAction, TListenerSignature extends TAction["__type"]["listenerSignature"] = TAction["__type"]["listenerSignature"], TErrorListenerSignature extends TAction["__type"]["errorListenerSignature"] = TAction["__type"]["errorListenerSignature"], TBeforeActionListenerSignature extends TAction["__type"]["beforeActionSignature"] = TAction["__type"]["beforeActionSignature"]>(action: TAction, listener: TListenerSignature | null, errorListener?: TErrorListenerSignature | null, beforeActionListener?: TBeforeActionListenerSignature | null): void;

package/dist/react/useListenToAction.js

@@ -1,55 +1,31 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useListenToAction = useListenToAction;
-const react_1 = require("react");
-function useListenToAction(action, listener, errorListener, beforeActionListener) {
-    const listenerRef = (0, react_1.useRef)(listener);
-    const actionRef = (0, react_1.useRef)(action);
-    const errorListenerRef = (0, react_1.useRef)(null);
-    const beforeActionListenerRef = (0, react_1.useRef)(null);
+import { useCallback, useEffect, useRef } from "react";
+export function useListenToAction(action, listener, errorListener, beforeActionListener) {
+    const listenerRef = useRef(listener);
     listenerRef.current = listener;
-    const genericHandler = (0, react_1.useCallback)((arg) => {
+    const genericHandler = useCallback((arg) => {
         var _a;
         (_a = listenerRef.current) === null || _a === void 0 ? void 0 : _a.call(listenerRef, arg);
     }, []);
-    (0, react_1.useEffect)(() => {
-        actionRef.current.removeListener(genericHandler);
-        actionRef.current = action;
-        actionRef.current.addListener(genericHandler);
-    }, [action]);
-    (0, react_1.useEffect)(() => {
-        if (errorListenerRef.current !== errorListener) {
-            if (errorListenerRef.current) {
-                actionRef.current.removeErrorListener(errorListenerRef.current);
-            }
-            errorListenerRef.current = errorListener || null;
-            if (errorListener) {
-                actionRef.current.addErrorListener(errorListener);
-            }
-        }
-    }, [errorListener]);
-    (0, react_1.useEffect)(() => {
-        if (beforeActionListenerRef.current !== beforeActionListener) {
-            if (beforeActionListenerRef.current) {
-                actionRef.current.removeBeforeActionListener(beforeActionListenerRef.current);
-            }
-            beforeActionListenerRef.current = beforeActionListener || null;
-            if (beforeActionListener) {
-                actionRef.current.addBeforeActionListener(beforeActionListener);
-            }
-        }
-    }, [beforeActionListener]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
+        action.addListener(genericHandler);
         return () => {
-            actionRef.current.removeListener(genericHandler);
-            if (errorListenerRef.current) {
-                actionRef.current.removeErrorListener(errorListenerRef.current);
-                errorListenerRef.current = null;
-            }
-            if (beforeActionListenerRef.current) {
-                actionRef.current.removeBeforeActionListener(beforeActionListenerRef.current);
-                beforeActionListenerRef.current = null;
-            }
+            action.removeListener(genericHandler);
         };
-    }, []);
+    }, [action, genericHandler]);
+    useEffect(() => {
+        if (errorListener) {
+            action.addErrorListener(errorListener);
+            return () => {
+                action.removeErrorListener(errorListener);
+            };
+        }
+    }, [action, errorListener]);
+    useEffect(() => {
+        if (beforeActionListener) {
+            action.addBeforeActionListener(beforeActionListener);
+            return () => {
+                action.removeBeforeActionListener(beforeActionListener);
+            };
+        }
+    }, [action, beforeActionListener]);
 }

package/dist/react/useListenToActionBus.d.ts

@@ -1,6 +1,6 @@
-import type { BaseActionBus } from "../actionBus";
-import type { ListenerOptions } from "../event";
-import type { ErrorListenerSignature, KeyOf } from "../lib/types";
+import type { BaseActionBus } from "../actionBus.js";
+import type { ListenerOptions } from "../event.js";
+import type { ErrorListenerSignature, KeyOf } from "../lib/types.js";
 export type { BaseActionBus, ErrorListenerSignature, ListenerOptions };
 export declare function useListenToActionBus<TActionBus extends BaseActionBus, TKey extends KeyOf<TActionBus["__type"]["actions"]>, TListener extends TActionBus["__type"]["actions"][TKey]["listenerSignature"], TBeforeActionListener extends TActionBus["__type"]["actions"][TKey]["beforeActionSignature"]>(actionBus: TActionBus, actionName: TKey, listener?: TListener | null | {
     listener?: TListener;

package/dist/react/useListenToActionBus.js

@@ -1,37 +1,40 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useListenToActionBus = useListenToActionBus;
-const react_1 = require("react");
-function useListenToActionBus(actionBus, actionName, listener, options, errorListener, beforeActionListener) {
+import { useCallback, useEffect, useRef } from "react";
+import { useReconciledListener } from "./useReconciledListener.js";
+export function useListenToActionBus(actionBus, actionName, listener, options, errorListener, beforeActionListener) {
     if (listener && typeof listener !== "function") {
         options = listener.options;
         errorListener = listener.errorListener;
         beforeActionListener = listener.beforeActionListener;
         listener = listener.listener;
     }
-    const listenerRef = (0, react_1.useRef)(listener || null);
-    const beforeActionListenerRef = (0, react_1.useRef)(null);
+    const listenerRef = useRef(listener || null);
+    const beforeActionListenerRef = useRef(null);
     listenerRef.current = listener || null;
     beforeActionListenerRef.current = beforeActionListener || null;
-    const genericHandler = (0, react_1.useCallback)((arg) => {
+    const genericHandler = useCallback((arg) => {
         var _a;
         return (_a = listenerRef.current) === null || _a === void 0 ? void 0 : _a.call(listenerRef, arg);
     }, []);
-    const genericBeforeActionHandler = (0, react_1.useCallback)((...args) => {
+    const genericBeforeActionHandler = useCallback((...args) => {
         var _a;
-        return ((_a = beforeActionListenerRef.current) === null || _a === void 0 ? void 0 : _a.call(beforeActionListenerRef, ...args)) || undefined;
+        return (_a = beforeActionListenerRef.current) === null || _a === void 0 ? void 0 : _a.call(beforeActionListenerRef, ...args);
     }, []);
-    // Main listener + beforeAction listener - tied to actionName
-    (0, react_1.useEffect)(() => {
-        actionBus.addListener(actionName, genericHandler, options || undefined);
-        actionBus.get(actionName).addBeforeActionListener(genericBeforeActionHandler);
-        return () => {
-            actionBus.removeListener(actionName, genericHandler);
+    // Main listener + beforeAction listener - reconciled across changes
+    useReconciledListener({
+        keyDeps: [actionBus, actionName],
+        options: options !== null && options !== void 0 ? options : undefined,
+        subscribe: (opts) => {
+            actionBus.addListener(actionName, genericHandler, opts !== null && opts !== void 0 ? opts : undefined);
+            actionBus.get(actionName).addBeforeActionListener(genericBeforeActionHandler);
+        },
+        unsubscribe: (ctx) => {
+            actionBus.removeListener(actionName, genericHandler, ctx);
             actionBus.get(actionName).removeBeforeActionListener(genericBeforeActionHandler);
-        };
-    }, [actionBus, actionName, genericHandler, genericBeforeActionHandler]);
+        },
+        update: (ctx, opts) => actionBus.updateListenerOptions(actionName, genericHandler, ctx, opts !== null && opts !== void 0 ? opts : undefined),
+    });
     // Error listener - bus level
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (errorListener) {
             actionBus.addErrorListener(errorListener);
             return () => {

package/dist/react/useListenToEvent.d.ts

@@ -1,4 +1,4 @@
-import type { BaseEvent, ListenerOptions } from "../event";
-import type { ErrorListenerSignature } from "../lib/types";
+import type { BaseEvent, ListenerOptions } from "../event.js";
+import type { ErrorListenerSignature } from "../lib/types.js";
 export type { BaseEvent, ErrorListenerSignature, ListenerOptions };
 export declare function useListenToEvent<TEvent extends BaseEvent, TListenerSignature extends TEvent["__type"]["signature"], TErrorListenerSignature extends TEvent["__type"]["errorListenerSignature"]>(event: TEvent, listener: TListenerSignature, options?: ListenerOptions, errorListener?: TErrorListenerSignature): void;

package/dist/react/useListenToEvent.js

@@ -1,20 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useListenToEvent = useListenToEvent;
-const react_1 = require("react");
-function useListenToEvent(event, listener, options, errorListener) {
-    const listenerRef = (0, react_1.useRef)(listener);
+import { useCallback, useEffect, useRef } from "react";
+import { useReconciledListener } from "./useReconciledListener.js";
+export function useListenToEvent(event, listener, options, errorListener) {
+    const listenerRef = useRef(listener);
     listenerRef.current = listener;
-    const genericHandler = (0, react_1.useCallback)((...args) => {
+    const genericHandler = useCallback((...args) => {
         return listenerRef.current(...args);
     }, []);
-    (0, react_1.useEffect)(() => {
-        event.addListener(genericHandler, options);
-        return () => {
-            event.removeListener(genericHandler);
-        };
-    }, [event, genericHandler]);
-    (0, react_1.useEffect)(() => {
+    useReconciledListener({
+        keyDeps: [event],
+        options,
+        subscribe: (opts) => event.addListener(genericHandler, opts !== null && opts !== void 0 ? opts : undefined),
+        unsubscribe: (ctx) => event.removeListener(genericHandler, ctx),
+        update: (ctx, opts) => event.updateListenerOptions(genericHandler, ctx, opts !== null && opts !== void 0 ? opts : undefined),
+    });
+    useEffect(() => {
         if (errorListener) {
             event.addErrorListener(errorListener);
             return () => {

package/dist/react/useListenToEventBus.d.ts

@@ -1,5 +1,5 @@
-import type { ListenerOptions } from "../event";
-import type { BaseEventBus } from "../eventBus";
-import type { ErrorListenerSignature, KeyOf } from "../lib/types";
+import type { ListenerOptions } from "../event.js";
+import type { BaseEventBus } from "../eventBus.js";
+import type { ErrorListenerSignature, KeyOf } from "../lib/types.js";
 export type { BaseEventBus, ErrorListenerSignature, ListenerOptions };
 export declare function useListenToEventBus<TEventBus extends BaseEventBus, TKey extends KeyOf<TEventBus["__type"]["eventSignatures"]>, TListener extends TEventBus["__type"]["eventSignatures"][TKey]>(eventBus: TEventBus, eventName: TKey, listener: TListener, options?: ListenerOptions, errorListener?: ErrorListenerSignature<any[]>): void;

package/dist/react/useListenToEventBus.js

@@ -1,23 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useListenToEventBus = useListenToEventBus;
-const react_1 = require("react");
-function useListenToEventBus(eventBus, eventName, listener, options, errorListener) {
-    const listenerRef = (0, react_1.useRef)(listener);
+import { useCallback, useEffect, useRef } from "react";
+import { useReconciledListener } from "./useReconciledListener.js";
+export function useListenToEventBus(eventBus, eventName, listener, options, errorListener) {
+    const listenerRef = useRef(listener);
     listenerRef.current = listener;
-    const genericHandler = (0, react_1.useCallback)((...args) => {
+    const genericHandler = useCallback((...args) => {
         var _a;
         return (_a = listenerRef.current) === null || _a === void 0 ? void 0 : _a.call(listenerRef, ...args);
     }, []);
-    // Main listener - cleanup pattern handles eventBus/eventName changes
-    (0, react_1.useEffect)(() => {
-        eventBus.addListener(eventName, genericHandler, options);
-        return () => {
-            eventBus.removeListener(eventName, genericHandler);
-        };
-    }, [eventBus, eventName, genericHandler]);
+    // Main listener - reconciled across eventBus/eventName/option changes
+    useReconciledListener({
+        keyDeps: [eventBus, eventName],
+        options,
+        subscribe: (opts) => eventBus.addListener(eventName, genericHandler, opts !== null && opts !== void 0 ? opts : undefined),
+        unsubscribe: (ctx) => eventBus.removeListener(eventName, genericHandler, ctx),
+        update: (ctx, opts) => eventBus.updateListenerOptions(eventName, genericHandler, ctx, opts !== null && opts !== void 0 ? opts : undefined),
+    });
     // Error listener - cleanup pattern
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (errorListener) {
             eventBus.addErrorListener(errorListener);
             return () => {

package/dist/react/useListenToStoreChanges.d.ts

@@ -1,5 +1,5 @@
-import type { ListenerOptions } from "../event";
-import { KeyOf } from "../lib/types";
-import type { BaseStore } from "../store";
+import type { ListenerOptions } from "../event.js";
+import { KeyOf } from "../lib/types.js";
+import type { BaseStore } from "../store.js";
 export type { BaseStore, ListenerOptions };
 export declare function useListenToStoreChanges<TStore extends BaseStore, TKey extends KeyOf<TStore["__type"]["propTypes"]>, TListener extends TStore["__type"]["changeEvents"][TKey]>(store: TStore, key: TKey, listener: TListener, options?: ListenerOptions): void;

package/dist/react/useListenToStoreChanges.js

@@ -1,17 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useListenToStoreChanges = useListenToStoreChanges;
-const react_1 = require("react");
-function useListenToStoreChanges(store, key, listener, options) {
-    const listenerRef = (0, react_1.useRef)(listener);
+import { useCallback, useRef } from "react";
+import { useReconciledListener } from "./useReconciledListener.js";
+export function useListenToStoreChanges(store, key, listener, options) {
+    const listenerRef = useRef(listener);
     listenerRef.current = listener;
-    const genericHandler = (0, react_1.useCallback)((value, previousValue) => {
+    const genericHandler = useCallback((value, previousValue) => {
         return listenerRef.current(value, previousValue);
     }, []);
-    (0, react_1.useEffect)(() => {
-        store.onChange(key, genericHandler, options);
-        return () => {
-            store.removeOnChange(key, genericHandler);
-        };
-    }, [store, key, genericHandler]);
+    useReconciledListener({
+        keyDeps: [store, key],
+        options,
+        subscribe: (opts) => store.onChange(key, genericHandler, opts !== null && opts !== void 0 ? opts : undefined),
+        unsubscribe: (ctx) => store.removeOnChange(key, genericHandler, ctx),
+        update: (ctx, opts) => store.updateOnChangeOptions(key, genericHandler, ctx, opts !== null && opts !== void 0 ? opts : undefined),
+    });
 }

package/dist/react/useReconciledListener.d.ts

@@ -0,0 +1,33 @@
+import type { ListenerOptions } from "../event.js";
+type ListenerOps = {
+    /**
+     * Identity dependencies. When any element changes (reference equality) the
+     * listener is fully resubscribed: the old registration is removed using the
+     * previous closure (previous target + previous context) and a fresh one is
+     * added. `context` is appended automatically because it is part of listener
+     * identity. The array length must stay constant across renders.
+     */
+    keyDeps: ReadonlyArray<unknown>;
+    options?: ListenerOptions | null;
+    /** Add the listener to the current target with the given options. */
+    subscribe: (options?: ListenerOptions | null) => void;
+    /** Remove the listener from the current target using the given context. */
+    unsubscribe: (context: object | null) => void;
+    /** Update soft options on the live listener in place (counters preserved). */
+    update: (context: object | null, options?: ListenerOptions | null) => void;
+};
+/**
+ * Reconciles a single reactive listener across renders without relying on the
+ * identity of the options object.
+ *
+ * Two effects cooperate:
+ *  - an identity effect keyed by `[...keyDeps, context]` performs the classic
+ *    add-on-mount / remove-on-cleanup cycle, so target/context changes (and
+ *    React StrictMode remounts) resubscribe correctly using the OLD context on
+ *    cleanup;
+ *  - a reconciliation effect runs every render and, when only soft options
+ *    changed, updates the live listener in place instead of resubscribing, so
+ *    per-listener counters are preserved.
+ */
+export declare function useReconciledListener({ keyDeps, options, subscribe, unsubscribe, update, }: ListenerOps): void;
+export {};

package/dist/react/useReconciledListener.js

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from "react";
+import { areListenerOptionsEqual } from "./listenerOptionsEqual.js";
+/**
+ * Reconciles a single reactive listener across renders without relying on the
+ * identity of the options object.
+ *
+ * Two effects cooperate:
+ *  - an identity effect keyed by `[...keyDeps, context]` performs the classic
+ *    add-on-mount / remove-on-cleanup cycle, so target/context changes (and
+ *    React StrictMode remounts) resubscribe correctly using the OLD context on
+ *    cleanup;
+ *  - a reconciliation effect runs every render and, when only soft options
+ *    changed, updates the live listener in place instead of resubscribing, so
+ *    per-listener counters are preserved.
+ */
+export function useReconciledListener({ keyDeps, options, subscribe, unsubscribe, update, }) {
+    var _a;
+    const context = (_a = options === null || options === void 0 ? void 0 : options.context) !== null && _a !== void 0 ? _a : null;
+    const committedRef = useRef(undefined);
+    const registeredRef = useRef(false);
+    // Identity effect: (re)subscribe on target/context change.
+    useEffect(() => {
+        subscribe(options);
+        committedRef.current = options;
+        registeredRef.current = true;
+        return () => {
+            unsubscribe(context);
+            registeredRef.current = false;
+        };
+    }, [...keyDeps, context]);
+    // Reconciliation effect: in-place soft-option updates every render.
+    useEffect(() => {
+        if (!registeredRef.current) {
+            return;
+        }
+        if (committedRef.current === options) {
+            return;
+        }
+        if (!areListenerOptionsEqual(committedRef.current, options)) {
+            update(context, options);
+        }
+        committedRef.current = options;
+    });
+}

package/dist/react/useStore.d.ts

@@ -1,5 +1,5 @@
-import { createStore } from "../store";
-import type { BasePropMap, BeforeChangeEventName, ChangeEventName, ErrorEventName, ResetEventName, StoreDefinitionHelper } from "../store";
+import { createStore } from "../store.js";
+import type { BasePropMap, BeforeChangeEventName, ChangeEventName, ErrorEventName, ResetEventName, StoreDefinitionHelper } from "../store.js";
 export type { BasePropMap, BeforeChangeEventName, ChangeEventName, ErrorEventName, ResetEventName, StoreDefinitionHelper, };
 export declare function useStore<PropMap extends BasePropMap, Store extends StoreDefinitionHelper<PropMap> = StoreDefinitionHelper<PropMap>, Config extends {
     onChange?: Partial<Store["changeEvents"]>;

package/dist/react/useStore.js

@@ -1,29 +1,78 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStore = useStore;
-const react_1 = require("react");
-const store_1 = require("../store");
-function useStore(initialData = {}, config) {
-    const store = (0, react_1.useMemo)(() => {
-        const store = (0, store_1.createStore)(initialData);
-        if (config === null || config === void 0 ? void 0 : config.onChange) {
-            for (const key in config.onChange) {
-                store.onChange(key, config.onChange[key]);
-            }
+import { useEffect, useMemo, useRef } from "react";
+import { createStore } from "../store.js";
+export function useStore(initialData = {}, config) {
+    // initialData is seed-only (captured once); later changes are ignored.
+    const store = useMemo(() => createStore(initialData), []);
+    // Track only the handlers we added (per category + key) and compare by
+    // reference, so consumer listeners added outside the hook are never
+    // touched and inline-equal config maps do not duplicate or churn
+    // subscriptions.
+    const appliedRef = useRef({
+        onChange: {},
+        pipes: {},
+        control: {},
+    });
+    const add = (category, key, fn) => {
+        if (category === "onChange") {
+            store.onChange(key, fn);
         }
-        if (config === null || config === void 0 ? void 0 : config.pipes) {
-            for (const key in config.pipes) {
-                // @ts-expect-error - TS widens for-in key to string; types are correct
-                store.pipe(key, config.pipes[key]);
-            }
+        else if (category === "pipes") {
+            store.pipe(key, fn);
         }
-        if (config === null || config === void 0 ? void 0 : config.control) {
-            for (const key in config.control) {
-                // @ts-expect-error - TS widens for-in key to string; types are correct
-                store.control(key, config.control[key]);
-            }
+        else {
+            store.control(key, fn);
+        }
+    };
+    const remove = (category, key, fn) => {
+        if (category === "onChange") {
+            store.removeOnChange(key, fn);
         }
-        return store;
+        else if (category === "pipes") {
+            store.removePipe(key, fn);
+        }
+        else {
+            store.removeControl(key, fn);
+        }
+    };
+    // Reconcile config handlers every render (no cleanup here, so equal config
+    // never causes remove/add churn).
+    useEffect(() => {
+        const categories = {
+            onChange: config === null || config === void 0 ? void 0 : config.onChange,
+            pipes: config === null || config === void 0 ? void 0 : config.pipes,
+            control: config === null || config === void 0 ? void 0 : config.control,
+        };
+        Object.keys(categories).forEach((category) => {
+            var _a;
+            const next = (_a = categories[category]) !== null && _a !== void 0 ? _a : {};
+            const prev = appliedRef.current[category];
+            // Remove stale/changed handlers before adding (matters for pipes).
+            for (const key in prev) {
+                if (next[key] !== prev[key]) {
+                    remove(category, key, prev[key]);
+                }
+            }
+            for (const key in next) {
+                if (next[key] !== prev[key]) {
+                    add(category, key, next[key]);
+                }
+            }
+            appliedRef.current[category] = Object.assign({}, next);
+        });
+    });
+    // Unmount cleanup: detach everything we applied (also makes StrictMode
+    // remount re-subscribe cleanly via the reconcile effect above).
+    useEffect(() => {
+        return () => {
+            const applied = appliedRef.current;
+            Object.keys(applied).forEach((category) => {
+                const map = applied[category];
+                for (const key in map) {
+                    remove(category, key, map[key]);
+                }
+                applied[category] = {};
+            });
+        };
     }, []);
     return store;
 }

package/dist/react/useStoreState.d.ts

@@ -1,3 +1,3 @@
-import { KeyOf } from "../lib/types";
-import { BaseStore } from "../store";
+import { KeyOf } from "../lib/types.js";
+import { BaseStore } from "../store.js";
 export declare function useStoreState<TStore extends BaseStore, TKey extends KeyOf<TStore["__type"]["propTypes"]>>(store: TStore, key: TKey): readonly [TStore["__type"]["propTypes"][TKey], (value: TStore["__type"]["propTypes"][TKey] | ((previousValue?: TStore["__type"]["propTypes"][TKey]) => TStore["__type"]["propTypes"][TKey])) => void];

package/dist/react/useStoreState.js

@@ -1,33 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStoreState = useStoreState;
-const react_1 = require("react");
-function useStoreState(store, key) {
-    const [value, setValue] = (0, react_1.useState)(store.get(key));
-    const storeRef = (0, react_1.useRef)(store);
-    const keyRef = (0, react_1.useRef)(key);
-    const onChange = (0, react_1.useCallback)((value) => {
-        setValue(value);
-    }, []);
-    const setter = (0, react_1.useCallback)((value) => {
+import { useCallback, useSyncExternalStore } from "react";
+export function useStoreState(store, key) {
+    const subscribe = useCallback((onStoreChange) => {
+        const listener = () => {
+            onStoreChange();
+        };
+        store.onChange(key, listener);
+        return () => {
+            store.removeOnChange(key, listener);
+        };
+    }, [store, key]);
+    const getSnapshot = useCallback(() => store.get(key), [store, key]);
+    const value = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+    const setter = useCallback((value) => {
         if (typeof value === "function") {
-            storeRef.current.set(keyRef.current, value(storeRef.current.get(keyRef.current)));
+            store.set(key, value(store.get(key)));
         }
         else {
-            storeRef.current.set(keyRef.current, value);
+            store.set(key, value);
         }
-    }, []);
-    (0, react_1.useEffect)(() => {
-        return () => {
-            storeRef.current.removeOnChange(keyRef.current, onChange);
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        storeRef.current.removeOnChange(keyRef.current, onChange);
-        storeRef.current = store;
-        keyRef.current = key;
-        storeRef.current.onChange(keyRef.current, onChange);
-        setValue(store.get(key));
     }, [store, key]);
     return [value, setter];
 }