@isograph/react-disposable-state 0.2.0 → 0.3.1

package/.turbo/turbo-compile-typescript.log

@@ -0,0 +1,4 @@
+
+> @isograph/react-disposable-state@0.3.1 compile-typescript /Users/runner/work/isograph/isograph/libs/isograph-react-disposable-state
+> rm -rf dist/* && tsc -p tsconfig.pkg.json
+

package/README.md

@@ -84,9 +84,9 @@ A hook that:
 
 ```typescript
 const { state }: { state: T } = useLazyDisposableState<T>(
-  parentCache: ParentCache<T>,
-  factory: Loader<T>,
-  options: ?Options,
+  parentCache,
+  factory,
+  options,
 );
 ```
 
@@ -105,11 +105,9 @@ const {
   state,
   setState,
 }: {
-  state: T | null,
-  setState: (ItemCleanupPair<T>) => void,
-} = useUpdatableDisposableState<T>(
-  options: ?Options,
-);
+  state: T | null;
+  setState: (pair: ItemCleanupPair<T>) => void;
+} = useUpdatableDisposableState<T>(options);
 ```
 
 ### `useDisposableState`
@@ -123,13 +121,9 @@ const {
   state,
   setState,
 }: {
-  state: T,
-  setState: (ItemCleanupPair<T>) => void,
-} = useDisposableState<T>(
-  parentCache: ParentCache<T>,
-  factory: Loader<T>,
-  options: ?Options,
-);
+  state: T;
+  setState: (pair: ItemCleanupPair<T>) => void;
+} = useDisposableState<T>(parentCache, factory, options);
 ```
 
 ## Miscellaneous notes

package/dist/CacheItem.d.ts

@@ -56,3 +56,4 @@ export declare class CacheItem<T> {
     private __maybeExitNotInParentCacheAndNotDisposedState;
 }
 export declare function createTemporarilyRetainedCacheItem<T>(factory: Factory<T>, removeFromParentCache: CleanupFn, options: CacheItemOptions | void): [CacheItem<T>, CleanupFn];
+//# sourceMappingURL=CacheItem.d.ts.map

package/dist/CacheItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CacheItem.d.ts","sourceRoot":"","sources":["../src/CacheItem.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,eAAe,EAChB,MAAM,4BAA4B,CAAC;AAIpC,MAAM,MAAM,2BAA2B,GAAG;IACxC,IAAI,EAAE,6BAA6B,CAAC;CACrC,CAAC;AACF,MAAM,MAAM,8BAA8B,CAAC,CAAC,IAAI;IAC9C,IAAI,EAAE,gCAAgC,CAAC;IACvC,KAAK,EAAE,CAAC,CAAC;IACT,YAAY,EAAE,MAAM,IAAI,CAAC;IAGzB,oBAAoB,EAAE,MAAM,CAAC;CAC9B,CAAC;AACF,MAAM,MAAM,2BAA2B,CAAC,CAAC,IAAI;IAC3C,IAAI,EAAE,6BAA6B,CAAC;IACpC,KAAK,EAAE,CAAC,CAAC;IACT,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAGlC,oBAAoB,EAAE,MAAM,CAAC;IAG7B,oBAAoB,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,IACxB,2BAA2B,CAAC,CAAC,CAAC,GAC9B,8BAA8B,CAAC,CAAC,CAAC,GACjC,2BAA2B,CAAC;AAEhC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,mBAAmB,EAAE,MAAM,CAAC;CAC7B,CAAC;AAKF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,SAAS,CAAC,CAAC;IACtB,OAAO,CAAC,OAAO,CAAoB;IACnC,OAAO,CAAC,SAAS,CAA0B;gBAQzC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EACnB,qBAAqB,EAAE,SAAS,EAChC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAgBlC,QAAQ,IAAI,CAAC;IAiBb,4BAA4B,CAC1B,wBAAwB,EAAE,SAAS,GAClC,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI;IA8E5B,eAAe,IAAI,SAAS;IAkE5B,eAAe,IAAI,SAAS;IAoE5B,OAAO,CAAC,2CAA2C;IAoBnD,OAAO,CAAC,8CAA8C;CAUvD;AAED,wBAAgB,kCAAkC,CAAC,CAAC,EAClD,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EACnB,qBAAqB,EAAE,SAAS,EAChC,OAAO,EAAE,gBAAgB,GAAG,IAAI,GAC/B,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAI3B"}

package/dist/CacheItem.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createTemporarilyRetainedCacheItem = exports.CacheItem = void 0;
+exports.CacheItem = void 0;
+exports.createTemporarilyRetainedCacheItem = createTemporarilyRetainedCacheItem;
 const DEFAULT_TEMPORARY_RETAIN_TIME = 5000;
 // TODO don't export this class, only export type (interface) instead
 // TODO convert cacheitem impl to a getter and setter and free functions
@@ -266,4 +267,3 @@ function createTemporarilyRetainedCacheItem(factory, removeFromParentCache, opti
     const disposeTemporaryRetain = cacheItem.temporaryRetain();
     return [cacheItem, disposeTemporaryRetain];
 }
-exports.createTemporarilyRetainedCacheItem = createTemporarilyRetainedCacheItem;

package/dist/ParentCache.d.ts

@@ -1,5 +1,5 @@
-import { CacheItem } from './CacheItem';
 import { CleanupFn, Factory, ItemCleanupPair } from '@isograph/disposable-types';
+import { CacheItem } from './CacheItem';
 /**
  * ParentCache
  * - A ParentCache can be in two states: populated and unpopulated.
@@ -21,7 +21,7 @@ export declare class ParentCache<T> {
     private readonly __factory;
     constructor(factory: Factory<T>);
     /**
-     * This is called from useCachedPrecommitValue, when the parent cache is populated
+     * This is called from useCachedResponsivePrecommitValue, when the parent cache is populated
      * and a previous temporary retain has been disposed. This can occur in scenarios like:
      * - temporary retain A is created by component B rendering
      * - temporary retain A expires, emptying the parent cache
@@ -37,3 +37,4 @@ export declare class ParentCache<T> {
     get factory(): Factory<T>;
     isEmpty(): boolean;
 }
+//# sourceMappingURL=ParentCache.d.ts.map

package/dist/ParentCache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParentCache.d.ts","sourceRoot":"","sources":["../src/ParentCache.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,eAAe,EAChB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,SAAS,EAAsC,MAAM,aAAa,CAAC;AAK5E;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,WAAW,CAAC,CAAC;IACxB,OAAO,CAAC,WAAW,CAA6B;IAChD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAa;gBAI3B,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAI/B;;;;;;;;;OASG;IACH,8BAA8B,IAAI,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI;IAM3D,+BAA+B,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC;IAM/D,OAAO,CAAC,4BAA4B;IA4BpC,KAAK;IAIL,IAAI,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CAExB;IAED,OAAO,IAAI,OAAO;CAGnB"}

package/dist/ParentCache.js

@@ -28,7 +28,7 @@ class ParentCache {
         this.__factory = factory;
     }
     /**
-     * This is called from useCachedPrecommitValue, when the parent cache is populated
+     * This is called from useCachedResponsivePrecommitValue, when the parent cache is populated
      * and a previous temporary retain has been disposed. This can occur in scenarios like:
      * - temporary retain A is created by component B rendering
      * - temporary retain A expires, emptying the parent cache

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 export * from '@isograph/disposable-types';
 export * from './CacheItem';
 export * from './ParentCache';
-export * from './useCachedPrecommitValue';
+export * from './useCachedResponsivePrecommitValue';
 export * from './useDisposableState';
 export * from './useHasCommittedRef';
 export * from './useLazyDisposableState';
 export * from './useUpdatableDisposableState';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAE3C,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qCAAqC,CAAC;AACpD,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC"}

package/dist/index.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("@isograph/disposable-types"), exports);
 __exportStar(require("./CacheItem"), exports);
 __exportStar(require("./ParentCache"), exports);
-__exportStar(require("./useCachedPrecommitValue"), exports);
+__exportStar(require("./useCachedResponsivePrecommitValue"), exports);
 __exportStar(require("./useDisposableState"), exports);
 __exportStar(require("./useHasCommittedRef"), exports);
 __exportStar(require("./useLazyDisposableState"), exports);

package/dist/{useCachedPrecommitValue.d.ts → useCachedResponsivePrecommitValue.d.ts}

@@ -1,10 +1,10 @@
-import { ParentCache } from './ParentCache';
 import { ItemCleanupPair } from '@isograph/disposable-types';
+import { ParentCache } from './ParentCache';
 /**
- * usePrecommitValue<T>
+ * useCachedResponsivePrecommitValue<T>
  * - Takes a mutable parent cache, a factory function, and an onCommit callback.
- * - Returns T before the initial commit, and null afterward.
- * - Calls onCommit with the ItemCleanupPair during the first commit.
+ * - Returns T before commit after every parent cache change, and null afterward.
+ * - Calls onCommit with the ItemCleanupPair during commit after every parent cache change.
  * - The T from the render phase is only temporarily retained. It may have been
  *   disposed by the time of the commit. If so, this hook checks the parent cache
  *   for another T or creates one, and passes this T to onCommit.
@@ -21,16 +21,18 @@ import { ItemCleanupPair } from '@isograph/disposable-types';
  *   with a set of variables (e.g. {name: "Matthew"}), and pass in another cache
  *   (e.g. associated with {name: "James"}), which is empty, the hook will fill that
  *   new cache with the factory function.
+ * - Post-commit, passing a different parentCache will reset hook to the pre-commit
+ *   state. The cache will return T before commit, then fill the new cache with the
+ *   factory function and return null afterwards.
  *
  * Passing a different factory:
  * - Passing a different factory has no effect, except when factory is called,
- *   which is when the parent cache is being filled, or during the initial commit.
+ *   which is when the parent cache is being filled, or during commit.
  *
  * Passing a different onCommit:
- * - Passing a different onCommit has no effect, except for during the initial commit.
- *
- * Post-commit, all parameters are ignored and the hook returns null.
+ * - Passing a different onCommit has no effect, except for during commit.
  */
-export declare function useCachedPrecommitValue<T>(parentCache: ParentCache<T>, onCommit: (pair: ItemCleanupPair<T>) => void): {
+export declare function useCachedResponsivePrecommitValue<T>(parentCache: ParentCache<T>, onCommit: (pair: ItemCleanupPair<T>) => void): {
     state: T;
 } | null;
+//# sourceMappingURL=useCachedResponsivePrecommitValue.d.ts.map

package/dist/useCachedResponsivePrecommitValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCachedResponsivePrecommitValue.d.ts","sourceRoot":"","sources":["../src/useCachedResponsivePrecommitValue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,iCAAiC,CAAC,CAAC,EACjD,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,EAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAAI,GAC3C;IAAE,KAAK,EAAE,CAAC,CAAA;CAAE,GAAG,IAAI,CA8DrB"}

package/dist/{useCachedPrecommitValue.js → useCachedResponsivePrecommitValue.js}

@@ -1,13 +1,12 @@
 'use strict';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCachedPrecommitValue = void 0;
+exports.useCachedResponsivePrecommitValue = useCachedResponsivePrecommitValue;
 const react_1 = require("react");
-const useHasCommittedRef_1 = require("./useHasCommittedRef");
 /**
- * usePrecommitValue<T>
+ * useCachedResponsivePrecommitValue<T>
  * - Takes a mutable parent cache, a factory function, and an onCommit callback.
- * - Returns T before the initial commit, and null afterward.
- * - Calls onCommit with the ItemCleanupPair during the first commit.
+ * - Returns T before commit after every parent cache change, and null afterward.
+ * - Calls onCommit with the ItemCleanupPair during commit after every parent cache change.
  * - The T from the render phase is only temporarily retained. It may have been
  *   disposed by the time of the commit. If so, this hook checks the parent cache
  *   for another T or creates one, and passes this T to onCommit.
@@ -24,17 +23,18 @@ const useHasCommittedRef_1 = require("./useHasCommittedRef");
  *   with a set of variables (e.g. {name: "Matthew"}), and pass in another cache
  *   (e.g. associated with {name: "James"}), which is empty, the hook will fill that
  *   new cache with the factory function.
+ * - Post-commit, passing a different parentCache will reset hook to the pre-commit
+ *   state. The cache will return T before commit, then fill the new cache with the
+ *   factory function and return null afterwards.
  *
  * Passing a different factory:
  * - Passing a different factory has no effect, except when factory is called,
- *   which is when the parent cache is being filled, or during the initial commit.
+ *   which is when the parent cache is being filled, or during commit.
  *
  * Passing a different onCommit:
- * - Passing a different onCommit has no effect, except for during the initial commit.
- *
- * Post-commit, all parameters are ignored and the hook returns null.
+ * - Passing a different onCommit has no effect, except for during commit.
  */
-function useCachedPrecommitValue(parentCache, onCommit) {
+function useCachedResponsivePrecommitValue(parentCache, onCommit) {
     // TODO: there should be two APIs. One in which we always re-render if the
     // committed item was not returned during the last render, and one in which
     // we do not. The latter is useful for cases where every disposable item
@@ -42,8 +42,10 @@ function useCachedPrecommitValue(parentCache, onCommit) {
     //
     // This hook is the former, i.e. re-renders if the committed item has changed.
     const [, rerender] = (0, react_1.useState)(null);
+    const lastCommittedParentCache = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        // On first commit, cacheItem may be disposed, because during the render phase,
+        lastCommittedParentCache.current = parentCache;
+        // On commit, cacheItem may be disposed, because during the render phase,
         // we only temporarily retained the item, and the temporary retain could have
         // expired by the time of the commit.
         //
@@ -80,14 +82,12 @@ function useCachedPrecommitValue(parentCache, onCommit) {
             // identically, but must be loaded.)
             rerender({});
         }
-    }, []);
-    const hasCommittedRef = (0, useHasCommittedRef_1.useHasCommittedRef)();
-    if (hasCommittedRef.current) {
+    }, [parentCache]);
+    if (lastCommittedParentCache.current === parentCache) {
         return null;
     }
-    // Safety: item is only safe to use (i.e. guaranteed not to have disposed)
+    // Safety: item is only safe to use (i.e. guaranteed not to have been disposed)
     // during this tick.
     const [cacheItem, item, disposeOfTemporaryRetain] = parentCache.getOrPopulateAndTemporaryRetain();
     return { state: item };
 }
-exports.useCachedPrecommitValue = useCachedPrecommitValue;

package/dist/useDisposableState.d.ts

@@ -1,5 +1,5 @@
-import { ParentCache } from './ParentCache';
 import { ItemCleanupPair } from '@isograph/disposable-types';
+import { ParentCache } from './ParentCache';
 import { UnassignedState } from './useUpdatableDisposableState';
 type UseUpdatableDisposableStateReturnValue<T> = {
     state: T;
@@ -7,3 +7,4 @@ type UseUpdatableDisposableStateReturnValue<T> = {
 };
 export declare function useDisposableState<T = never>(parentCache: ParentCache<T>): UseUpdatableDisposableStateReturnValue<T>;
 export {};
+//# sourceMappingURL=useDisposableState.d.ts.map

package/dist/useDisposableState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDisposableState.d.ts","sourceRoot":"","sources":["../src/useDisposableState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAEL,eAAe,EAEhB,MAAM,+BAA+B,CAAC;AAEvC,KAAK,sCAAsC,CAAC,CAAC,IAAI;IAC/C,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,KAAK,IAAI,CAAC;CACxE,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,KAAK,EAC1C,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,GAC1B,sCAAsC,CAAC,CAAC,CAAC,CAgE3C"}

package/dist/useDisposableState.js

@@ -1,13 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDisposableState = void 0;
+exports.useDisposableState = useDisposableState;
 const react_1 = require("react");
-const useCachedPrecommitValue_1 = require("./useCachedPrecommitValue");
+const useCachedResponsivePrecommitValue_1 = require("./useCachedResponsivePrecommitValue");
 const useUpdatableDisposableState_1 = require("./useUpdatableDisposableState");
 function useDisposableState(parentCache) {
     var _a, _b, _c;
     const itemCleanupPairRef = (0, react_1.useRef)(null);
-    const preCommitItem = (0, useCachedPrecommitValue_1.useCachedPrecommitValue)(parentCache, (pair) => {
+    const preCommitItem = (0, useCachedResponsivePrecommitValue_1.useCachedResponsivePrecommitValue)(parentCache, (pair) => {
+        var _a;
+        (_a = itemCleanupPairRef.current) === null || _a === void 0 ? void 0 : _a[1]();
         itemCleanupPairRef.current = pair;
     });
     const { state: stateFromDisposableStateHook, setState } = (0, useUpdatableDisposableState_1.useUpdatableDisposableState)();
@@ -44,15 +46,14 @@ function useDisposableState(parentCache) {
     // Note that in the post-commit post-setState state, itemCleanupPairRef
     // can still be assigned, during the render before the
     // cleanupItemCleanupPairRefAfterSetState effect is called.
-    const state = (_c = (_a = (stateFromDisposableStateHook != useUpdatableDisposableState_1.UNASSIGNED_STATE
+    const state = (_b = (_a = (stateFromDisposableStateHook != useUpdatableDisposableState_1.UNASSIGNED_STATE
         ? stateFromDisposableStateHook
-        : null)) !== null && _a !== void 0 ? _a : (_b = itemCleanupPairRef.current) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : preCommitItem === null || preCommitItem === void 0 ? void 0 : preCommitItem.state;
+        : null)) !== null && _a !== void 0 ? _a : preCommitItem === null || preCommitItem === void 0 ? void 0 : preCommitItem.state) !== null && _b !== void 0 ? _b : (_c = itemCleanupPairRef.current) === null || _c === void 0 ? void 0 : _c[0];
     return {
         state: state,
         setState,
     };
 }
-exports.useDisposableState = useDisposableState;
 // @ts-ignore
 function tsTests() {
     let x;

package/dist/useHasCommittedRef.d.ts

@@ -3,3 +3,4 @@ import { MutableRefObject } from 'react';
  * Returns true if the component has committed, false otherwise.
  */
 export declare function useHasCommittedRef(): MutableRefObject<boolean>;
+//# sourceMappingURL=useHasCommittedRef.d.ts.map

package/dist/useHasCommittedRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHasCommittedRef.d.ts","sourceRoot":"","sources":["../src/useHasCommittedRef.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAqB,MAAM,OAAO,CAAC;AAE5D;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,gBAAgB,CAAC,OAAO,CAAC,CAM9D"}

package/dist/useHasCommittedRef.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useHasCommittedRef = void 0;
+exports.useHasCommittedRef = useHasCommittedRef;
 const react_1 = require("react");
 /**
  * Returns true if the component has committed, false otherwise.
@@ -12,4 +12,3 @@ function useHasCommittedRef() {
     }, []);
     return hasCommittedRef;
 }
-exports.useHasCommittedRef = useHasCommittedRef;

package/dist/useLazyDisposableState.d.ts

@@ -1,13 +1,15 @@
 import { ParentCache } from './ParentCache';
+import { type UnassignedState } from './useUpdatableDisposableState';
 /**
  * useLazyDisposableState<T>
  * - Takes a mutable parent cache and a factory function
  * - Returns { state: T }
  *
- * This lazily loads the disposable item using useCachedPrecommitValue, then
+ * This lazily loads the disposable item using useCachedResponsivePrecommitValue, then
  * (on commit) sets it in state. The item continues to be returned after
  * commit and is disposed when the hook unmounts.
  */
-export declare function useLazyDisposableState<T>(parentCache: ParentCache<T>): {
+export declare function useLazyDisposableState<T>(parentCache: ParentCache<Exclude<T, UnassignedState>>): {
     state: T;
 };
+//# sourceMappingURL=useLazyDisposableState.d.ts.map

package/dist/useLazyDisposableState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLazyDisposableState.d.ts","sourceRoot":"","sources":["../src/useLazyDisposableState.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAErE;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,GACpD;IACD,KAAK,EAAE,CAAC,CAAC;CACV,CAoCA"}

package/dist/useLazyDisposableState.js

@@ -1,31 +1,35 @@
 'use strict';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLazyDisposableState = void 0;
+exports.useLazyDisposableState = useLazyDisposableState;
 const react_1 = require("react");
-const useCachedPrecommitValue_1 = require("./useCachedPrecommitValue");
+const useCachedResponsivePrecommitValue_1 = require("./useCachedResponsivePrecommitValue");
 /**
  * useLazyDisposableState<T>
  * - Takes a mutable parent cache and a factory function
  * - Returns { state: T }
  *
- * This lazily loads the disposable item using useCachedPrecommitValue, then
+ * This lazily loads the disposable item using useCachedResponsivePrecommitValue, then
  * (on commit) sets it in state. The item continues to be returned after
  * commit and is disposed when the hook unmounts.
  */
 function useLazyDisposableState(parentCache) {
     var _a, _b;
     const itemCleanupPairRef = (0, react_1.useRef)(null);
-    const preCommitItem = (0, useCachedPrecommitValue_1.useCachedPrecommitValue)(parentCache, (pair) => {
+    const preCommitItem = (0, useCachedResponsivePrecommitValue_1.useCachedResponsivePrecommitValue)(parentCache, (pair) => {
+        var _a;
+        (_a = itemCleanupPairRef.current) === null || _a === void 0 ? void 0 : _a[1]();
         itemCleanupPairRef.current = pair;
     });
     (0, react_1.useEffect)(() => {
-        var _a;
-        const cleanupFn = (_a = itemCleanupPairRef.current) === null || _a === void 0 ? void 0 : _a[1];
-        // TODO confirm useEffect is called in order.
-        if (cleanupFn == null) {
-            throw new Error('cleanupFn unexpectedly null. This indicates a bug in react-disposable-state.');
-        }
-        return cleanupFn;
+        return () => {
+            var _a;
+            const cleanupFn = (_a = itemCleanupPairRef.current) === null || _a === void 0 ? void 0 : _a[1];
+            // TODO confirm useEffect is called in order.
+            if (cleanupFn == null) {
+                throw new Error('cleanupFn unexpectedly null. This indicates a bug in react-disposable-state.');
+            }
+            return cleanupFn();
+        };
     }, []);
     const returnedItem = (_a = preCommitItem === null || preCommitItem === void 0 ? void 0 : preCommitItem.state) !== null && _a !== void 0 ? _a : (_b = itemCleanupPairRef.current) === null || _b === void 0 ? void 0 : _b[0];
     if (returnedItem != null) {
@@ -36,4 +40,3 @@ function useLazyDisposableState(parentCache) {
     // so during subsequent renders, itemCleanupPairRef.current is non-null.
     throw new Error('returnedItem was unexpectedly null. This indicates a bug in react-disposable-state.');
 }
-exports.useLazyDisposableState = useLazyDisposableState;

package/dist/useUpdatableDisposableState.d.ts

@@ -37,3 +37,4 @@ type UseUpdatableDisposableStateReturnValue<T> = {
  */
 export declare function useUpdatableDisposableState<T = never>(): UseUpdatableDisposableStateReturnValue<T>;
 export {};
+//# sourceMappingURL=useUpdatableDisposableState.d.ts.map

package/dist/useUpdatableDisposableState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUpdatableDisposableState.d.ts","sourceRoot":"","sources":["../src/useUpdatableDisposableState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAI7D,eAAO,MAAM,gBAAgB,EAAE,OAAO,MAAiB,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,OAAO,gBAAgB,CAAC;AAEtD,KAAK,sCAAsC,CAAC,CAAC,IAAI;IAC/C,KAAK,EAAE,CAAC,GAAG,eAAe,CAAC;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,KAAK,IAAI,CAAC;CACxE,CAAC;AAoBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,2BAA2B,CACzC,CAAC,GAAG,KAAK,KACN,sCAAsC,CAAC,CAAC,CAAC,CA0D7C"}

package/dist/useUpdatableDisposableState.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useUpdatableDisposableState = exports.UNASSIGNED_STATE = void 0;
+exports.UNASSIGNED_STATE = void 0;
+exports.useUpdatableDisposableState = useUpdatableDisposableState;
 const react_1 = require("react");
 const useHasCommittedRef_1 = require("./useHasCommittedRef");
 exports.UNASSIGNED_STATE = Symbol();
@@ -77,7 +78,6 @@ function useUpdatableDisposableState() {
         state: stateICI !== exports.UNASSIGNED_STATE ? stateICI.item : exports.UNASSIGNED_STATE,
     };
 }
-exports.useUpdatableDisposableState = useUpdatableDisposableState;
 // @ts-ignore
 function tsTests() {
     const a = useUpdatableDisposableState();

package/docs/managing-complex-state.md

@@ -13,17 +13,19 @@ Consider using `useUpdatableDisposableState` state to manage an array of disposa
 The behavior of `useUpdatableDisposableState` is to entirely dispose of all previously-held items after a new item is set in state. So, if we had
 
 ```js
-const { state, setState } = useUpdatableDisposableState();
-// assume state === [item1], and the cleanup function will dispose item1
-
-const addItem2ToState = () => {
-  setState([item1, item2], () => {
-    disposeItem1();
-    disposeItem2();
-  });
+const component = () => {
+  const { state, setState } = useUpdatableDisposableState();
+  // assume state === [item1], and the cleanup function will dispose item1
+
+  const addItem2ToState = () => {
+    setState([item1, item2], () => {
+      disposeItem1();
+      disposeItem2();
+    });
+  };
+
+  return makePrettyJSX(state[0]);
 };
-
-return makePrettyJSX(state[0]);
 ```
 
 In the above, `item1` would be disposed after the state was updated to be `[item1, item2]`. Meaning, the hook returns an item that has already been disposed. Clearly, this will not do.
@@ -51,25 +53,27 @@ Given an undisposed active reference `r1`, one can get a new active reference `r
 Let's use reference counted pointers in the example.
 
 ```js
-const { state, setState } = useUpdatableDisposableState();
-// assume state === [item1activeReference], and the cleanup function will dispose that active reference
-
-const addItem2ToState = () => {
-  const [item2, disposeItem2] = createDisposeItem2();
-  const [item2ActiveReference, disposeItem2ActiveReference] =
-    createReferenceCountedPointer([item2, disposeItem2]);
-
-  // get a new active reference to the existing item1
-  const [item1ActiveReference, disposeItem1ActiveReference] = nullthrows(
-    state[0].cloneIfNotDisposed(),
-  );
-  setState([item1ActiveReference, item2ActiveReference], () => {
-    disposeItem1ActiveReference();
-    disposeItem2ActiveReference();
-  });
+const component = () => {
+  const { state, setState } = useUpdatableDisposableState();
+  // assume state === [item1activeReference], and the cleanup function will dispose that active reference
+
+  const addItem2ToState = () => {
+    const [item2, disposeItem2] = createDisposeItem2();
+    const [item2ActiveReference, disposeItem2ActiveReference] =
+      createReferenceCountedPointer([item2, disposeItem2]);
+
+    // get a new active reference to the existing item1
+    const [item1ActiveReference, disposeItem1ActiveReference] = nullthrows(
+      state[0].cloneIfNotDisposed(),
+    );
+    setState([item1ActiveReference, item2ActiveReference], () => {
+      disposeItem1ActiveReference();
+      disposeItem2ActiveReference();
+    });
+  };
+
+  return makePrettyJSX(nullthrows(state[0].getItemIfNotDisposed()));
 };
-
-return makePrettyJSX(nullthrows(state[0].getItemIfNotDisposed()));
 ```
 
 Not the most ergonomic, but it does the job.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isograph/react-disposable-state",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Primitives for managing disposable state in React",
   "homepage": "https://isograph.dev",
   "main": "dist/index.js",
@@ -8,26 +8,26 @@
   "author": "Isograph Labs",
   "license": "MIT",
   "scripts": {
-    "compile": "rm -rf dist/* && tsc -p tsconfig.pkg.json",
+    "compile-typescript": "rm -rf dist/* && tsc -p tsconfig.pkg.json",
     "compile-watch": "tsc -p tsconfig.pkg.json --watch",
     "test": "vitest run",
     "test-watch": "vitest watch",
     "coverage": "vitest run --coverage",
     "note": "WE SHOULD ALSO TEST HERE",
-    "prepack": "yarn run compile",
-    "tsc": "tsc"
+    "prepack": "pnpm run compile-typescript",
+    "tsc": "tsc",
+    "tsc-force": "tsc --build --clean && tsc --build --force"
   },
   "dependencies": {
-    "@isograph/disposable-types": "0.2.0"
+    "@isograph/disposable-types": "*"
   },
   "peerDependencies": {
-    "react": "18.2.0"
+    "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.31",
+    "@types/react": "18.3.1",
     "react-test-renderer": "^18.2.0",
-    "vitest": "^0.29.8",
-    "typescript": "^5.0.3"
+    "typescript": "5.6.3"
   },
   "repository": {
     "type": "git",

package/src/CacheItem.test.ts

@@ -1,18 +1,18 @@
+import { ItemCleanupPair } from '@isograph/disposable-types';
 import {
-  describe,
+  afterEach,
   assert,
-  test,
-  vi,
   beforeEach,
-  afterEach,
+  describe,
   expect,
+  test,
+  vi,
 } from 'vitest';
 import {
   CacheItem,
   CacheItemState,
   createTemporarilyRetainedCacheItem,
 } from './CacheItem';
-import { ItemCleanupPair } from '@isograph/disposable-types';
 
 function getState<T>(cacheItem: CacheItem<T>): CacheItemState<T> {
   return (cacheItem as any).__state as CacheItemState<T>;

package/src/ParentCache.test.ts

@@ -1,7 +1,7 @@
-import { describe, assert, test, vi, expect } from 'vitest';
-import { ParentCache } from './ParentCache';
 import { ItemCleanupPair } from '@isograph/disposable-types';
+import { assert, describe, expect, test, vi } from 'vitest';
 import { CacheItem } from './CacheItem';
+import { ParentCache } from './ParentCache';
 
 function getValue<T>(cache: ParentCache<T>): CacheItem<T> | null {
   return (cache as any).__cacheItem as CacheItem<T> | null;

package/src/ParentCache.ts

@@ -1,9 +1,9 @@
-import { CacheItem, createTemporarilyRetainedCacheItem } from './CacheItem';
 import {
   CleanupFn,
   Factory,
   ItemCleanupPair,
 } from '@isograph/disposable-types';
+import { CacheItem, createTemporarilyRetainedCacheItem } from './CacheItem';
 
 // TODO convert cache impl to a getter and setter and free functions
 // TODO accept options that get passed to CacheItem
@@ -35,7 +35,7 @@ export class ParentCache<T> {
   }
 
   /**
-   * This is called from useCachedPrecommitValue, when the parent cache is populated
+   * This is called from useCachedResponsivePrecommitValue, when the parent cache is populated
    * and a previous temporary retain has been disposed. This can occur in scenarios like:
    * - temporary retain A is created by component B rendering
    * - temporary retain A expires, emptying the parent cache

package/src/index.ts

@@ -2,7 +2,7 @@ export * from '@isograph/disposable-types';
 
 export * from './CacheItem';
 export * from './ParentCache';
-export * from './useCachedPrecommitValue';
+export * from './useCachedResponsivePrecommitValue';
 export * from './useDisposableState';
 export * from './useHasCommittedRef';
 export * from './useLazyDisposableState';

package/src/{useCachedPrecommitValue.test.tsx → useCachedResponsivePrecommitValue.test.tsx}

@@ -1,10 +1,10 @@
-import { describe, test, vi, expect, assert } from 'vitest';
-import { ParentCache } from './ParentCache';
 import { ItemCleanupPair } from '@isograph/disposable-types';
-import { useCachedPrecommitValue } from './useCachedPrecommitValue';
 import React from 'react';
 import { create } from 'react-test-renderer';
+import { assert, describe, expect, test, vi } from 'vitest';
 import { CacheItem, CacheItemState } from './CacheItem';
+import { ParentCache } from './ParentCache';
+import { useCachedResponsivePrecommitValue } from './useCachedResponsivePrecommitValue';
 
 function getItem<T>(cache: ParentCache<T>): CacheItem<T> | null {
   return (cache as any).__cacheItem;
@@ -60,7 +60,7 @@ async function awaitableCreate(Component, isConcurrent) {
   return element;
 }
 
-describe('useCachedPrecommitValue', () => {
+describe('useCachedResponsivePrecommitValue', () => {
   test('on initial render, it should call getOrPopulateAndTemporaryRetain', async () => {
     const disposeItem = vi.fn();
     const factory = vi.fn(() => {
@@ -80,7 +80,7 @@ describe('useCachedPrecommitValue', () => {
       render();
       React.useEffect(componentCommits);
 
-      const data = useCachedPrecommitValue(cache, hookOnCommit);
+      const data = useCachedResponsivePrecommitValue(cache, hookOnCommit);
 
       expect(render).toBeCalledTimes(1);
       expect(componentCommits).not.toBeCalled();
@@ -117,7 +117,7 @@ describe('useCachedPrecommitValue', () => {
     function TestComponent() {
       render();
       expect(render).toHaveBeenCalledTimes(1);
-      const data = useCachedPrecommitValue(cache, hookOnCommit);
+      const data = useCachedResponsivePrecommitValue(cache, hookOnCommit);
 
       React.useEffect(() => {
         componentCommits();
@@ -155,7 +155,7 @@ describe('useCachedPrecommitValue', () => {
     function TestComponent() {
       const [, _setState] = React.useState(null);
       setState = _setState;
-      const value = useCachedPrecommitValue(cache, hookOnCommit);
+      const value = useCachedResponsivePrecommitValue(cache, hookOnCommit);
 
       if (initialRender && value !== null) {
         initialRender = false;
@@ -206,7 +206,7 @@ describe('useCachedPrecommitValue', () => {
       let renderCount = 0;
       function TestComponent() {
         render();
-        const value = useCachedPrecommitValue(cache, hookOnCommit);
+        const value = useCachedResponsivePrecommitValue(cache, hookOnCommit);
 
         expect(value).toEqual({ state: 1 });
         expect(factory).toHaveBeenCalledTimes(1);
@@ -270,7 +270,7 @@ describe('useCachedPrecommitValue', () => {
       const render = vi.fn();
       function TestComponent() {
         render();
-        const value = useCachedPrecommitValue(cache, hookOnCommit);
+        const value = useCachedResponsivePrecommitValue(cache, hookOnCommit);
 
         expect(value).toEqual({ state: factoryValue });
 
@@ -347,7 +347,7 @@ describe('useCachedPrecommitValue', () => {
       function TestComponent() {
         render();
 
-        useCachedPrecommitValue(cache, hookOnCommit);
+        useCachedResponsivePrecommitValue(cache, hookOnCommit);
 
         React.useEffect(() => {
           componentCommits();
@@ -435,7 +435,7 @@ describe('useCachedPrecommitValue', () => {
       const render = vi.fn();
       function TestComponent() {
         render();
-        useCachedPrecommitValue(cache, hookOnCommit);
+        useCachedResponsivePrecommitValue(cache, hookOnCommit);
 
         React.useEffect(() => {
           componentCommits();
@@ -528,7 +528,7 @@ describe('useCachedPrecommitValue', () => {
       function TestComponent() {
         render();
 
-        useCachedPrecommitValue(cache, hookOnCommit);
+        useCachedResponsivePrecommitValue(cache, hookOnCommit);
 
         React.useEffect(() => {
           componentCommits();

package/src/{useCachedPrecommitValue.ts → useCachedResponsivePrecommitValue.ts}

@@ -1,15 +1,14 @@
 'use strict';
 
-import { useEffect, useState } from 'react';
-import { ParentCache } from './ParentCache';
-import { useHasCommittedRef } from './useHasCommittedRef';
 import { ItemCleanupPair } from '@isograph/disposable-types';
+import { useEffect, useRef, useState } from 'react';
+import { ParentCache } from './ParentCache';
 
 /**
- * usePrecommitValue<T>
+ * useCachedResponsivePrecommitValue<T>
  * - Takes a mutable parent cache, a factory function, and an onCommit callback.
- * - Returns T before the initial commit, and null afterward.
- * - Calls onCommit with the ItemCleanupPair during the first commit.
+ * - Returns T before commit after every parent cache change, and null afterward.
+ * - Calls onCommit with the ItemCleanupPair during commit after every parent cache change.
  * - The T from the render phase is only temporarily retained. It may have been
  *   disposed by the time of the commit. If so, this hook checks the parent cache
  *   for another T or creates one, and passes this T to onCommit.
@@ -26,17 +25,18 @@ import { ItemCleanupPair } from '@isograph/disposable-types';
  *   with a set of variables (e.g. {name: "Matthew"}), and pass in another cache
  *   (e.g. associated with {name: "James"}), which is empty, the hook will fill that
  *   new cache with the factory function.
+ * - Post-commit, passing a different parentCache will reset hook to the pre-commit
+ *   state. The cache will return T before commit, then fill the new cache with the
+ *   factory function and return null afterwards.
  *
  * Passing a different factory:
  * - Passing a different factory has no effect, except when factory is called,
- *   which is when the parent cache is being filled, or during the initial commit.
+ *   which is when the parent cache is being filled, or during commit.
  *
  * Passing a different onCommit:
- * - Passing a different onCommit has no effect, except for during the initial commit.
- *
- * Post-commit, all parameters are ignored and the hook returns null.
+ * - Passing a different onCommit has no effect, except for during commit.
  */
-export function useCachedPrecommitValue<T>(
+export function useCachedResponsivePrecommitValue<T>(
   parentCache: ParentCache<T>,
   onCommit: (pair: ItemCleanupPair<T>) => void,
 ): { state: T } | null {
@@ -47,9 +47,11 @@ export function useCachedPrecommitValue<T>(
   //
   // This hook is the former, i.e. re-renders if the committed item has changed.
   const [, rerender] = useState<{} | null>(null);
+  const lastCommittedParentCache = useRef<ParentCache<T> | null>(null);
 
   useEffect(() => {
-    // On first commit, cacheItem may be disposed, because during the render phase,
+    lastCommittedParentCache.current = parentCache;
+    // On commit, cacheItem may be disposed, because during the render phase,
     // we only temporarily retained the item, and the temporary retain could have
     // expired by the time of the commit.
     //
@@ -81,21 +83,19 @@ export function useCachedPrecommitValue<T>(
         // We did not find an item in the parent cache, create a new one.
         onCommit(parentCache.factory());
       }
-
       // TODO: Consider whether we always want to rerender if the committed item
       // was not returned during the last render, or whether some callers will
       // prefer opting out of this behavior (e.g. if every disposable item behaves
       // identically, but must be loaded.)
       rerender({});
     }
-  }, []);
+  }, [parentCache]);
 
-  const hasCommittedRef = useHasCommittedRef();
-  if (hasCommittedRef.current) {
+  if (lastCommittedParentCache.current === parentCache) {
     return null;
   }
 
-  // Safety: item is only safe to use (i.e. guaranteed not to have disposed)
+  // Safety: item is only safe to use (i.e. guaranteed not to have been disposed)
   // during this tick.
   const [cacheItem, item, disposeOfTemporaryRetain] =
     parentCache.getOrPopulateAndTemporaryRetain();

package/src/useDisposableState.ts

@@ -1,7 +1,7 @@
+import { ItemCleanupPair } from '@isograph/disposable-types';
 import { useEffect, useRef } from 'react';
 import { ParentCache } from './ParentCache';
-import { ItemCleanupPair } from '@isograph/disposable-types';
-import { useCachedPrecommitValue } from './useCachedPrecommitValue';
+import { useCachedResponsivePrecommitValue } from './useCachedResponsivePrecommitValue';
 import {
   UNASSIGNED_STATE,
   UnassignedState,
@@ -18,9 +18,13 @@ export function useDisposableState<T = never>(
 ): UseUpdatableDisposableStateReturnValue<T> {
   const itemCleanupPairRef = useRef<ItemCleanupPair<T> | null>(null);
 
-  const preCommitItem = useCachedPrecommitValue(parentCache, (pair) => {
-    itemCleanupPairRef.current = pair;
-  });
+  const preCommitItem = useCachedResponsivePrecommitValue(
+    parentCache,
+    (pair) => {
+      itemCleanupPairRef.current?.[1]();
+      itemCleanupPairRef.current = pair;
+    },
+  );
 
   const { state: stateFromDisposableStateHook, setState } =
     useUpdatableDisposableState<T>();
@@ -68,8 +72,8 @@ export function useDisposableState<T = never>(
     (stateFromDisposableStateHook != UNASSIGNED_STATE
       ? stateFromDisposableStateHook
       : null) ??
-    itemCleanupPairRef.current?.[0] ??
-    preCommitItem?.state;
+    preCommitItem?.state ??
+    itemCleanupPairRef.current?.[0];
 
   return {
     state: state!,

package/src/useLazyDisposableState.test.tsx

@@ -0,0 +1,71 @@
+import { ItemCleanupPair } from '@isograph/disposable-types';
+import React, { useEffect, useState } from 'react';
+import { create } from 'react-test-renderer';
+import { describe, expect, test, vi } from 'vitest';
+import { ParentCache } from './ParentCache';
+import { useLazyDisposableState } from './useLazyDisposableState';
+
+function createCache<T>(value: T) {
+  const disposeItem = vi.fn();
+  const factory = vi.fn(() => {
+    const pair: ItemCleanupPair<T> = [value, disposeItem];
+    return pair;
+  });
+  const cache = new ParentCache(factory);
+  return { cache, disposeItem };
+}
+
+function promiseWithResolvers() {
+  let resolve;
+  let reject;
+  const promise = new Promise((_resolve, _reject) => {
+    resolve = _resolve;
+    reject = _reject;
+  });
+  return { resolve, reject, promise };
+}
+
+describe('useLazyDisposableState', async () => {
+  test('on cache change, it should dispose previous cache', async () => {
+    const cache1 = createCache(1);
+    const cache2 = createCache(2);
+    const renders = vi.fn();
+
+    let unmounted = promiseWithResolvers();
+    let committed = promiseWithResolvers();
+
+    function TestComponent() {
+      const [cache, setCache] = useState(cache1.cache);
+      const { state } = useLazyDisposableState(cache);
+
+      useEffect(() => {
+        setCache(cache2.cache);
+
+        return () => {
+          unmounted.resolve();
+        };
+      }, []);
+
+      useEffect(() => {
+        if (state == 1) return;
+        committed.resolve();
+      }, [state]);
+
+      renders(state);
+
+      return null;
+    }
+
+    const root = create(<TestComponent />, { unstable_isConcurrent: true });
+    await committed.promise;
+    expect(cache1.disposeItem).toHaveBeenCalled();
+    expect(cache1.cache.factory).toHaveBeenCalledOnce();
+    root.unmount();
+    await unmounted.promise;
+    expect(cache2.disposeItem).toHaveBeenCalled();
+    expect(cache2.cache.factory).toHaveBeenCalledOnce();
+    expect(renders).toHaveBeenNthCalledWith(1, 1);
+    expect(renders).toHaveBeenNthCalledWith(2, 2);
+    expect(renders).toHaveBeenCalledTimes(2);
+  });
+});

package/src/useLazyDisposableState.ts

@@ -1,40 +1,50 @@
 'use strict';
 
+import type { ItemCleanupPair } from '@isograph/isograph-disposable-types';
 import { useEffect, useRef } from 'react';
-import type { ItemCleanupPair } from '@isograph/disposable-types';
 import { ParentCache } from './ParentCache';
-import { useCachedPrecommitValue } from './useCachedPrecommitValue';
+import { useCachedResponsivePrecommitValue } from './useCachedResponsivePrecommitValue';
+import { type UnassignedState } from './useUpdatableDisposableState';
 
 /**
  * useLazyDisposableState<T>
  * - Takes a mutable parent cache and a factory function
  * - Returns { state: T }
  *
- * This lazily loads the disposable item using useCachedPrecommitValue, then
+ * This lazily loads the disposable item using useCachedResponsivePrecommitValue, then
  * (on commit) sets it in state. The item continues to be returned after
  * commit and is disposed when the hook unmounts.
  */
-export function useLazyDisposableState<T>(parentCache: ParentCache<T>): {
+export function useLazyDisposableState<T>(
+  parentCache: ParentCache<Exclude<T, UnassignedState>>,
+): {
   state: T;
 } {
   const itemCleanupPairRef = useRef<ItemCleanupPair<T> | null>(null);
 
-  const preCommitItem = useCachedPrecommitValue(parentCache, (pair) => {
-    itemCleanupPairRef.current = pair;
-  });
+  const preCommitItem = useCachedResponsivePrecommitValue(
+    parentCache,
+    (pair) => {
+      itemCleanupPairRef.current?.[1]();
+      itemCleanupPairRef.current = pair;
+    },
+  );
 
   useEffect(() => {
-    const cleanupFn = itemCleanupPairRef.current?.[1];
-    // TODO confirm useEffect is called in order.
-    if (cleanupFn == null) {
-      throw new Error(
-        'cleanupFn unexpectedly null. This indicates a bug in react-disposable-state.',
-      );
-    }
-    return cleanupFn;
+    return () => {
+      const cleanupFn = itemCleanupPairRef.current?.[1];
+      // TODO confirm useEffect is called in order.
+      if (cleanupFn == null) {
+        throw new Error(
+          'cleanupFn unexpectedly null. This indicates a bug in react-disposable-state.',
+        );
+      }
+      return cleanupFn();
+    };
   }, []);
 
   const returnedItem = preCommitItem?.state ?? itemCleanupPairRef.current?.[0];
+
   if (returnedItem != null) {
     return { state: returnedItem };
   }

package/src/useUpdatableDisposableState.test.tsx

@@ -1,9 +1,9 @@
-import { describe, test, vi, expect } from 'vitest';
 import React from 'react';
 import { create } from 'react-test-renderer';
+import { describe, expect, test, vi } from 'vitest';
 import {
-  useUpdatableDisposableState,
   UNASSIGNED_STATE,
+  useUpdatableDisposableState,
 } from './useUpdatableDisposableState';
 
 function Suspender({ promise, isResolvedRef }) {

package/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.pkg.json",
   "compilerOptions": {
-    "noEmit": true,
-  },
+    "noEmit": true
+  }
 }