@montra-interactive/deepstate-react 0.3.5 → 0.3.6

package/README.md

@@ -103,15 +103,32 @@ const summary = useSelect(
 );
 ```
 
+#### Selector Memoization
+
+`useSelect` automatically memoizes selectors: the selector function only re-runs when its input values actually change (compared by reference). This means you can safely return new arrays or objects from selectors without causing infinite re-render loops:
+
+```tsx
+// Safe! The selector only re-runs when items or sortBy actually change.
+// Even though .sort() returns a new array, it won't cause infinite emissions.
+const sorted = useSelect(
+  [store.items, store.sortBy],
+  ([items, sortBy]) => Array.from(items).sort((a, b) =>
+    sortBy === 'name' ? a.name.localeCompare(b.name) : b.updatedAt - a.updatedAt
+  )
+);
+```
+
+This works like Redux's `createSelector` / Reselect — if the inputs haven't changed, the selector doesn't re-run, preserving the previous output reference.
+
 #### Custom Equality Function
 
-Prevent re-renders with a custom equality check:
+For additional control, provide a custom equality check as the third argument. This is evaluated on the selector's **output** and acts as a safety net when different inputs might produce equivalent results:
 
 ```tsx
 const ids = useSelect(
   store.items,
   items => items.map(i => i.id),
-  // Custom array equality
+  // Custom array equality on the output
   (a, b) => a.length === b.length && a.every((v, i) => v === b[i])
 );
 ```

package/dist/hooks.d.ts

@@ -42,6 +42,20 @@ export declare function useObservable<T>(observable$: Observable<T>, getSnapshot
  * This is the primary hook for using deepstate in React.
  * Uses React 18's useSyncExternalStore for concurrent-mode safety.
  *
+ * ## Selector Memoization
+ *
+ * Selectors are automatically memoized on their inputs, similar to Redux's
+ * `createSelector` / Reselect. The selector function only re-executes when
+ * input values change by reference. This means selectors that return new
+ * arrays or objects (e.g. via `.sort()`, `.filter()`, `.map()`) are safe
+ * without needing custom equality functions.
+ *
+ * Memoization works in two layers:
+ * 1. **Input dedup** — `distinctUntilChanged` before the selector prevents
+ *    re-execution when inputs are referentially identical.
+ * 2. **Output dedup** — `distinctUntilChanged(equalityFn)` after the selector
+ *    catches cases where different inputs produce equivalent outputs.
+ *
  * @example Single node (get raw value)
  * ```tsx
  * import { state } from 'deepstate';
@@ -83,6 +97,22 @@ export declare function useObservable<T>(observable$: Observable<T>, getSnapshot
  * }
  * ```
  *
+ * @example Selector returning new array (safe - auto-memoized)
+ * ```tsx
+ * // .sort() returns a new array each time, but the selector only
+ * // re-runs when items or sortBy actually change.
+ * function SortedItems() {
+ *   const sorted = useSelect(
+ *     [store.items, store.sortBy],
+ *     ([items, sortBy]) =>
+ *       Array.from(items).sort((a, b) =>
+ *         sortBy === 'name' ? a.name.localeCompare(b.name) : b.date - a.date
+ *       ),
+ *   );
+ *   return <ItemList items={sorted} />;
+ * }
+ * ```
+ *
  * @example Multiple nodes (array form)
  * ```tsx
  * // Combine multiple nodes - receives values as tuple

package/dist/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -20,6 +20,34 @@ function isObservable(obj) {
     return false;
   }
 }
+function useStableNodes(nodeOrNodes) {
+  const ref = useRef(nodeOrNodes);
+  if (Array.isArray(nodeOrNodes)) {
+    const prev = ref.current;
+    if (!Array.isArray(prev) || prev.length !== nodeOrNodes.length || nodeOrNodes.some((n, i) => n !== prev[i])) {
+      ref.current = nodeOrNodes;
+    }
+    return ref.current;
+  }
+  if (!isObservable(nodeOrNodes)) {
+    const prev = ref.current;
+    if (isObservable(prev) || Array.isArray(prev)) {
+      ref.current = nodeOrNodes;
+      return ref.current;
+    }
+    const prevObj = prev;
+    const currKeys = Object.keys(nodeOrNodes);
+    const prevKeys = Object.keys(prevObj);
+    if (currKeys.length !== prevKeys.length || currKeys.some((k) => nodeOrNodes[k] !== prevObj[k])) {
+      ref.current = nodeOrNodes;
+    }
+    return ref.current;
+  }
+  if (nodeOrNodes !== ref.current) {
+    ref.current = nodeOrNodes;
+  }
+  return ref.current;
+}
 function useObservable(observable$, getSnapshot) {
   const valueRef = useRef(getSnapshot());
   const subscribe = useCallback((onStoreChange) => {
@@ -33,55 +61,58 @@ function useObservable(observable$, getSnapshot) {
   return useSyncExternalStore(subscribe, getSnapshotMemo, getSnapshotMemo);
 }
 function useSelect(nodeOrNodes, selector, equalityFn = Object.is) {
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
+  const equalityFnRef = useRef(equalityFn);
+  equalityFnRef.current = equalityFn;
+  const stableNodes = useStableNodes(nodeOrNodes);
   const { combined$, getInitialValue } = useMemo(() => {
-    if (Array.isArray(nodeOrNodes)) {
-      const nodes = nodeOrNodes;
-      const sel = selector;
+    if (Array.isArray(stableNodes)) {
+      const nodes = stableNodes;
       return {
-        combined$: combineLatest(nodes).pipe(map((values) => sel(values)), distinctUntilChanged(equalityFn)),
+        combined$: combineLatest(nodes).pipe(distinctUntilChanged((a, b) => a.length === b.length && a.every((v, i) => Object.is(v, b[i]))), map((values) => selectorRef.current(values)), distinctUntilChanged((a, b) => equalityFnRef.current(a, b))),
         getInitialValue: () => {
           const values = nodes.map((n) => hasGet(n) ? n.get() : undefined);
-          return sel(values);
+          return selectorRef.current(values);
         }
       };
     }
-    if (!isObservable(nodeOrNodes)) {
-      const obj = nodeOrNodes;
+    if (!isObservable(stableNodes)) {
+      const obj = stableNodes;
       const keys = Object.keys(obj);
       const observables = keys.map((k) => obj[k]);
-      const sel = selector;
       return {
-        combined$: combineLatest(observables).pipe(map((values) => {
+        combined$: combineLatest(observables).pipe(distinctUntilChanged((a, b) => a.length === b.length && a.every((v, i) => Object.is(v, b[i]))), map((values) => {
           const result = {};
           keys.forEach((key, i) => {
             result[key] = values[i];
           });
-          return sel(result);
-        }), distinctUntilChanged(equalityFn)),
+          return selectorRef.current(result);
+        }), distinctUntilChanged((a, b) => equalityFnRef.current(a, b))),
         getInitialValue: () => {
           const result = {};
           keys.forEach((key) => {
             const node2 = obj[key];
             result[key] = hasGet(node2) ? node2.get() : undefined;
           });
-          return sel(result);
+          return selectorRef.current(result);
         }
       };
     }
-    const node = nodeOrNodes;
-    if (selector) {
+    const node = stableNodes;
+    if (selectorRef.current) {
       return {
-        combined$: node.pipe(map((value) => selector(value)), distinctUntilChanged(equalityFn)),
+        combined$: node.pipe(distinctUntilChanged(), map((value) => selectorRef.current(value)), distinctUntilChanged((a, b) => equalityFnRef.current(a, b))),
         getInitialValue: () => {
           if (hasGet(node)) {
-            return selector(node.get());
+            return selectorRef.current(node.get());
           }
           return;
         }
       };
     } else {
       return {
-        combined$: node.pipe(distinctUntilChanged(equalityFn)),
+        combined$: node.pipe(distinctUntilChanged((a, b) => equalityFnRef.current(a, b))),
         getInitialValue: () => {
           if (hasGet(node)) {
             return node.get();
@@ -90,7 +121,7 @@ function useSelect(nodeOrNodes, selector, equalityFn = Object.is) {
         }
       };
     }
-  }, [nodeOrNodes, selector, equalityFn]);
+  }, [stableNodes]);
   const valueRef = useRef(getInitialValue());
   const subscribe = useCallback((onStoreChange) => {
     const subscription = combined$.subscribe((newValue) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@montra-interactive/deepstate-react",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "React bindings for deepstate - Proxy-based reactive state management with RxJS.",
   "keywords": [
     "react",

package/src/hooks.ts

@@ -59,6 +59,62 @@ function isObservable(obj: unknown): obj is Observable<unknown> {
   }
 }
 
+/**
+ * Stabilizes the identity of nodeOrNodes across re-renders.
+ *
+ * Users typically pass inline arrays like `[store.a, store.b]` or inline objects
+ * like `{ a: store.a }` to useSelect. These are new references every render,
+ * which would cause useMemo to recreate the observable pipeline, leading to
+ * resubscription and potential infinite render loops (shareReplay replays the
+ * last value → onStoreChange → re-render → new useMemo → resubscribe → replay → …).
+ *
+ * This hook compares the individual node references inside the container and
+ * returns a stable reference as long as the nodes themselves haven't changed.
+ */
+type NodeInput = Observable<unknown> | Observable<unknown>[] | Record<string, Observable<unknown>>;
+
+function useStableNodes(nodeOrNodes: NodeInput): NodeInput {
+  const ref = useRef(nodeOrNodes);
+
+  // For arrays: check element-wise identity
+  if (Array.isArray(nodeOrNodes)) {
+    const prev = ref.current;
+    if (
+      !Array.isArray(prev) ||
+      prev.length !== nodeOrNodes.length ||
+      nodeOrNodes.some((n, i) => n !== (prev as Observable<unknown>[])[i])
+    ) {
+      ref.current = nodeOrNodes;
+    }
+    return ref.current;
+  }
+
+  // For objects (not observable): check key-wise identity
+  if (!isObservable(nodeOrNodes)) {
+    const prev = ref.current;
+    if (isObservable(prev) || Array.isArray(prev)) {
+      ref.current = nodeOrNodes;
+      return ref.current;
+    }
+    const prevObj = prev as Record<string, Observable<unknown>>;
+    const currKeys = Object.keys(nodeOrNodes);
+    const prevKeys = Object.keys(prevObj);
+    if (
+      currKeys.length !== prevKeys.length ||
+      currKeys.some((k) => nodeOrNodes[k] !== prevObj[k])
+    ) {
+      ref.current = nodeOrNodes;
+    }
+    return ref.current;
+  }
+
+  // For single observable: direct identity check
+  if (nodeOrNodes !== ref.current) {
+    ref.current = nodeOrNodes;
+  }
+  return ref.current;
+}
+
 /**
  * Hook to subscribe to any Observable and get its current value.
  * Re-renders the component whenever the observable emits a new value.
@@ -112,6 +168,20 @@ export function useObservable<T>(
  * This is the primary hook for using deepstate in React.
  * Uses React 18's useSyncExternalStore for concurrent-mode safety.
  *
+ * ## Selector Memoization
+ *
+ * Selectors are automatically memoized on their inputs, similar to Redux's
+ * `createSelector` / Reselect. The selector function only re-executes when
+ * input values change by reference. This means selectors that return new
+ * arrays or objects (e.g. via `.sort()`, `.filter()`, `.map()`) are safe
+ * without needing custom equality functions.
+ *
+ * Memoization works in two layers:
+ * 1. **Input dedup** — `distinctUntilChanged` before the selector prevents
+ *    re-execution when inputs are referentially identical.
+ * 2. **Output dedup** — `distinctUntilChanged(equalityFn)` after the selector
+ *    catches cases where different inputs produce equivalent outputs.
+ *
  * @example Single node (get raw value)
  * ```tsx
  * import { state } from 'deepstate';
@@ -153,6 +223,22 @@ export function useObservable<T>(
  * }
  * ```
  *
+ * @example Selector returning new array (safe - auto-memoized)
+ * ```tsx
+ * // .sort() returns a new array each time, but the selector only
+ * // re-runs when items or sortBy actually change.
+ * function SortedItems() {
+ *   const sorted = useSelect(
+ *     [store.items, store.sortBy],
+ *     ([items, sortBy]) =>
+ *       Array.from(items).sort((a, b) =>
+ *         sortBy === 'name' ? a.name.localeCompare(b.name) : b.date - a.date
+ *       ),
+ *   );
+ *   return <ItemList items={sorted} />;
+ * }
+ * ```
+ *
  * @example Multiple nodes (array form)
  * ```tsx
  * // Combine multiple nodes - receives values as tuple
@@ -239,41 +325,62 @@ export function useSelect(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   equalityFn: (a: any, b: any) => boolean = Object.is
 ): unknown {
+  // Use refs for selector and equalityFn so we always call the latest version
+  // without needing them as useMemo deps (which would recreate the observable).
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
+  const equalityFnRef = useRef(equalityFn);
+  equalityFnRef.current = equalityFn;
+
+  // Stabilize the node identity across renders.
+  // Users pass inline arrays/objects like [store.a, store.b] or { a: store.a },
+  // which are new references each render. We extract the actual node references
+  // and only recreate the observable when the nodes themselves change.
+  const stableNodes = useStableNodes(nodeOrNodes);
+
   // Determine the form and create the combined observable
   const { combined$, getInitialValue } = useMemo(() => {
     // Array form: [node1, node2, ...] - always requires selector
-    if (Array.isArray(nodeOrNodes)) {
-      const nodes = nodeOrNodes as Observable<unknown>[];
-      const sel = selector!; // selector is required for array form
+    if (Array.isArray(stableNodes)) {
+      const nodes = stableNodes as Observable<unknown>[];
       return {
         combined$: combineLatest(nodes).pipe(
-          map((values) => sel(values)),
-          distinctUntilChanged(equalityFn)
+          // Deduplicate inputs so the selector only re-runs when an input actually changes.
+          // This prevents selectors that return new references (e.g. .sort(), .map())
+          // from causing infinite emission loops with the default Object.is equality.
+          distinctUntilChanged((a, b) =>
+            a.length === b.length && a.every((v, i) => Object.is(v, b[i]))
+          ),
+          map((values) => selectorRef.current!(values)),
+          distinctUntilChanged((a, b) => equalityFnRef.current(a, b))
         ),
         getInitialValue: (): unknown => {
           const values = nodes.map((n) => (hasGet<unknown>(n) ? n.get() : undefined));
-          return sel(values);
+          return selectorRef.current!(values);
         },
       };
     }
 
     // Object form: { a: node1, b: node2, ... } - always requires selector
-    if (!isObservable(nodeOrNodes)) {
-      const obj = nodeOrNodes as Record<string, Observable<unknown>>;
+    if (!isObservable(stableNodes)) {
+      const obj = stableNodes as Record<string, Observable<unknown>>;
       const keys = Object.keys(obj);
       const observables = keys.map((k) => obj[k]);
-      const sel = selector!; // selector is required for object form
 
       return {
         combined$: combineLatest(observables).pipe(
+          // Deduplicate inputs so the selector only re-runs when an input actually changes.
+          distinctUntilChanged((a, b) =>
+            a.length === b.length && a.every((v, i) => Object.is(v, b[i]))
+          ),
           map((values) => {
             const result: Record<string, unknown> = {};
             keys.forEach((key, i) => {
               result[key] = values[i];
             });
-            return sel(result);
+            return selectorRef.current!(result);
           }),
-          distinctUntilChanged(equalityFn)
+          distinctUntilChanged((a, b) => equalityFnRef.current(a, b))
         ),
         getInitialValue: (): unknown => {
           const result: Record<string, unknown> = {};
@@ -281,24 +388,26 @@ export function useSelect(
             const node = obj[key];
             result[key] = hasGet<unknown>(node) ? node.get() : undefined;
           });
-          return sel(result);
+          return selectorRef.current!(result);
         },
       };
     }
 
     // Single node form - selector is optional
-    const node = nodeOrNodes as Observable<unknown>;
-    
-    if (selector) {
+    const node = stableNodes as Observable<unknown>;
+
+    if (selectorRef.current) {
       // With selector - apply transformation
       return {
         combined$: node.pipe(
-          map((value) => selector(value)),
-          distinctUntilChanged(equalityFn)
+          // Deduplicate inputs so the selector only re-runs when the input actually changes.
+          distinctUntilChanged(),
+          map((value) => selectorRef.current!(value)),
+          distinctUntilChanged((a, b) => equalityFnRef.current(a, b))
         ),
         getInitialValue: (): unknown => {
           if (hasGet<unknown>(node)) {
-            return selector(node.get());
+            return selectorRef.current!(node.get());
           }
           return undefined;
         },
@@ -307,7 +416,7 @@ export function useSelect(
       // No selector - return raw value
       return {
         combined$: node.pipe(
-          distinctUntilChanged(equalityFn)
+          distinctUntilChanged((a, b) => equalityFnRef.current(a, b))
         ),
         getInitialValue: (): unknown => {
           if (hasGet<unknown>(node)) {
@@ -317,7 +426,8 @@ export function useSelect(
         },
       };
     }
-  }, [nodeOrNodes, selector, equalityFn]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stableNodes]);
 
   // Ref to hold the current derived value
   const valueRef = useRef<unknown>(getInitialValue());