@ic-reactor/react 3.9.0 → 3.10.0

package/src/hooks/index.ts

@@ -1,5 +1,11 @@
 // ============================================================================
 // Hooks
+//
+// These are the RAW hooks: they take the reactor as a property. They are
+// therefore exported as `useReactor*` only — the `useActor*` names belong to
+// the bound hooks `createActorHooks` returns, which take no reactor. Aliasing
+// the raw implementations under the bound names would hand a caller following
+// the documented `useActorQuery({ functionName })` shape an undefined reactor.
 // ============================================================================
 
 // useActorQuery / useReactorQuery

package/src/hooks/useActorInfiniteQuery.ts

@@ -138,6 +138,11 @@ export const useActorInfiniteQuery = <
     [
       queryKey,
       reactor,
+      // `canisterId` is mutable reactor state that `setCanisterId` can change,
+      // while `reactor` itself stays the same object — so it has to be a
+      // dependency in its own right or the key stays pinned to the old canister
+      // while the queryFn already calls the new one.
+      reactor.canisterId?.toString(),
       functionName,
       callConfig,
       getArgs,

package/src/hooks/useActorMethod.ts

@@ -208,7 +208,16 @@ export function useActorMethod<
         { functionName, args: keyArgs, queryKey: customQueryKey },
         callConfig
       ),
-    [reactor, functionName, callConfig, customQueryKey]
+    // `canisterId` is mutable reactor state that `setCanisterId` can change,
+    // while `reactor` itself stays the same object — so it has to be a
+    // dependency in its own right or the key stays pinned to the old canister.
+    [
+      reactor,
+      reactor.canisterId?.toString(),
+      functionName,
+      callConfig,
+      customQueryKey,
+    ]
   )
 
   const queryKey = useMemo(() => buildQueryKey(args), [buildQueryKey, args])

package/src/hooks/useActorMutation.ts

@@ -1,4 +1,4 @@
-import { useMemo, useCallback } from "react"
+import { useCallback } from "react"
 import {
   useMutation,
   UseMutationOptions,
@@ -167,16 +167,24 @@ export const useActorMutation = <
     [onCanisterError, onError]
   )
 
-  const mutationOptions = useMemo(
-    () => ({
+  // Not memoized. The deps could only ever list the values destructured above,
+  // never the `options` rest bucket, so everything passed straight through —
+  // `onMutate`, `onSettled`, `retry`, `meta`, `gcTime` — was frozen at the first
+  // render: `useMutation` calls `observer.setOptions` from an effect keyed on
+  // the options identity, so a later render's closures never reached it. A
+  // component passing only `onSettled` would report the recipient selected at
+  // mount rather than at submit.
+  //
+  // `createMutation`'s own hook builds its options inline for the same reason.
+  // A fresh object per render costs nothing here: `setOptions` diffs the values
+  // rather than the reference.
+  return useMutation(
+    {
       ...options,
       mutationFn,
       onSuccess: handleSuccess,
       onError: handleError,
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [mutationFn, handleSuccess, handleError]
+    },
+    reactor.queryClient
   )
-
-  return useMutation(mutationOptions, reactor.queryClient)
 }

package/src/hooks/useActorQuery.ts

@@ -100,7 +100,17 @@ export const useActorQuery = <
         args,
         queryKey: defaultQueryKey,
       }),
-    [reactor, callConfig, functionName, args, defaultQueryKey]
+    // `canisterId` is mutable reactor state that `setCanisterId` can change,
+    // while `reactor` itself stays the same object — so it has to be a
+    // dependency in its own right or the key stays pinned to the old canister.
+    [
+      reactor,
+      reactor.canisterId?.toString(),
+      callConfig,
+      functionName,
+      args,
+      defaultQueryKey,
+    ]
   )
 
   return useQuery(

package/src/hooks/useActorSuspenseInfiniteQuery.ts

@@ -148,6 +148,11 @@ export const useActorSuspenseInfiniteQuery = <
     [
       queryKey,
       reactor,
+      // `canisterId` is mutable reactor state that `setCanisterId` can change,
+      // while `reactor` itself stays the same object — so it has to be a
+      // dependency in its own right or the key stays pinned to the old canister
+      // while the queryFn already calls the new one.
+      reactor.canisterId?.toString(),
       functionName,
       callConfig,
       getArgs,

package/src/hooks/useActorSuspenseQuery.ts

@@ -104,7 +104,17 @@ export const useActorSuspenseQuery = <
         args,
         queryKey: defaultQueryKey,
       }),
-    [reactor, callConfig, functionName, args, defaultQueryKey]
+    // `canisterId` is mutable reactor state that `setCanisterId` can change,
+    // while `reactor` itself stays the same object — so it has to be a
+    // dependency in its own right or the key stays pinned to the old canister.
+    [
+      reactor,
+      reactor.canisterId?.toString(),
+      callConfig,
+      functionName,
+      args,
+      defaultQueryKey,
+    ]
   )
 
   return useSuspenseQuery(

package/src/utils.ts

@@ -74,3 +74,48 @@ export function buildChainedSelect<TData, TSelected, TFinal = TSelected>(
   if (!hookSelect) return configSelect
   return (rawData: TData) => hookSelect(configSelect(rawData))
 }
+
+/**
+ * How many memoized query objects an args-late factory keeps.
+ *
+ * The memo exists so `getBalance(sameArgs)` returns the same object twice; it
+ * was unbounded, so an open-ended argument space — a per-principal balance in a
+ * long-lived SPA, a search-as-you-type filter, a cursor-keyed list — grew it
+ * forever (measured at ~2.9 kB per entry, 55.8 MB for 20k). A few hundred
+ * covers any realistic working set while capping the worst case.
+ */
+const FACTORY_CACHE_LIMIT = 256
+
+/**
+ * Smallest useful LRU: a `Map` already iterates in insertion order, so
+ * re-inserting on read is enough to track recency.
+ *
+ * Eviction is safe — it costs memoization, never correctness. A query object is
+ * a closure over the reactor and config, so one rebuilt after eviction behaves
+ * identically; only its reference identity differs.
+ */
+export function createBoundedCache<V>(limit: number = FACTORY_CACHE_LIMIT) {
+  const entries = new Map<string, V>()
+
+  return {
+    get(key: string): V | undefined {
+      const value = entries.get(key)
+      if (value === undefined) return undefined
+      // Touch: move to the most-recent end.
+      entries.delete(key)
+      entries.set(key, value)
+      return value
+    },
+    set(key: string, value: V): void {
+      if (entries.has(key)) entries.delete(key)
+      else if (entries.size >= limit) {
+        const oldest = entries.keys().next().value
+        if (oldest !== undefined) entries.delete(oldest)
+      }
+      entries.set(key, value)
+    },
+    get size(): number {
+      return entries.size
+    },
+  }
+}