@isograph/react-disposable-state 0.5.2 → 0.5.5

package/dist/useUpdatableDisposableState.mjs

@@ -60,7 +60,11 @@ function useUpdatableDisposableState() {
 	});
 	useEffect(() => {
 		return function disposeAllRemainingItems() {
-			for (const undisposedICI of undisposedICIs.current) undisposedICI.cleanup();
+			for (const undisposedICI of undisposedICIs.current) {
+				undisposedICIs.current.delete(undisposedICI);
+				undisposedICI.cleanup();
+			}
+			setStateICI(UNASSIGNED_STATE);
 		};
 	}, []);
 	return {

package/dist/useUpdatableDisposableState.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useUpdatableDisposableState.mjs","names":["UNASSIGNED_STATE: unique symbol","ici: ICI<T>"],"sources":["../src/useUpdatableDisposableState.ts"],"sourcesContent":["import type { ItemCleanupPair } from '@isograph/disposable-types';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { useHasCommittedRef } from './useHasCommittedRef';\n\nexport const UNASSIGNED_STATE: unique symbol = Symbol();\nexport type UnassignedState = typeof UNASSIGNED_STATE;\n\ntype UseUpdatableDisposableStateReturnValue<T> = {\n  state: T | UnassignedState;\n  setState: (pair: ItemCleanupPair<Exclude<T, UnassignedState>>) => void;\n};\n\n/**\n * ICI stands for ItemCleanupIndex. Use a short name because it shows up a lot.\n *\n * Like an ItemCleanupPair<T>, but with an additional index and as a struct\n * for readability.\n *\n * Interally, we must keep track of the index of the state change. The disposable\n * items that are set in state are not guaranteed to be distinct according to ===,\n * as in `setState([1, dispose1]); setState([1, dispose2])`. Following this, we\n * would expect dispose1 to be called on commit. If state items were compared for\n * ===, then dispose1 would not be called in such a situation.\n *\n * Note that this comes at a runtime cost, and we may want to expose APIs that do\n * not incur this runtime cost, for example in cases where every disposable item is\n * distinguishable via ===.\n */\ntype ICI<T> = { item: T; cleanup: () => void; index: number };\n\n/**\n * useUpdatableDisposableState\n * - Returns a { state, setItem } object.\n * - setItem accepts an ItemCleanupPair<T>, and throws if called before commit.\n * - setItem sets the T in state and adds it to a set.\n * - React's behavior is that when the hook commits, whatever item is currently\n *   returned from the useState hook is the oldest item which will ever be returned\n *   from that useState hook. (More newly created ones can later be returned with\n *   concurrent mode.)\n * - When this hook commits, all items up to, but not including, the item currently\n *   returned from the useState hook are disposed and removed from the set.\n *\n * Calling setState before the hook commits:\n * - Calling setState before the hook commits is disallowed because until the hook\n *   commits, React will not schedule any unmount callbacks, meaning that if this\n *   hook never commits, any disposable items passed to setState will never be\n *   disposed.\n * - We also cannot store them in some cache, because multiple components can share\n *   the same cache location (for example, if they are loading the same query from\n *   multiple components), so updating the cache with the disposable item will cause\n *   both components to show the updated data, which is almost certainly a bug.\n * - Note that calling setState before commit is probably an anti-pattern! Consider\n *   not doing it.\n * - If you must, the workaround is to lazily load the disposable item with\n *   useDisposableState or useLazyDisposableState, and update the cache location\n *   instead of calling setState before commit. One can update the cache location\n *   by calling setState on some parent component that has already mounted, and\n *   therefore passing in different props.\n *   - This may only work in concurrent mode, though.\n */\nexport function useUpdatableDisposableState<\n  T = never,\n>(): UseUpdatableDisposableStateReturnValue<T> {\n  const hasCommittedRef = useHasCommittedRef();\n\n  const undisposedICIs = useRef(new Set<ICI<T>>());\n  const setStateCountRef = useRef(0);\n\n  const [stateICI, setStateICI] = useState<ICI<T> | UnassignedState>(\n    UNASSIGNED_STATE,\n  );\n\n  const setStateAfterCommit = useCallback(\n    (itemCleanupPair: ItemCleanupPair<T>) => {\n      if (!hasCommittedRef.current) {\n        throw new Error(\n          'Calling setState before the component has committed is unsafe and disallowed.',\n        );\n      }\n\n      const ici: ICI<T> = {\n        item: itemCleanupPair[0],\n        cleanup: itemCleanupPair[1],\n        index: setStateCountRef.current,\n      };\n      setStateCountRef.current++;\n      undisposedICIs.current.add(ici);\n      setStateICI(ici);\n    },\n    [setStateICI],\n  );\n\n  useEffect(function cleanupUnreachableItems() {\n    const indexInState = stateICI !== UNASSIGNED_STATE ? stateICI.index : 0;\n\n    if (indexInState === 0) {\n      return;\n    }\n\n    for (const undisposedICI of undisposedICIs.current) {\n      if (undisposedICI.index === indexInState) {\n        break;\n      }\n      undisposedICIs.current.delete(undisposedICI);\n      undisposedICI.cleanup();\n    }\n  });\n\n  useEffect(() => {\n    return function disposeAllRemainingItems() {\n      for (const undisposedICI of undisposedICIs.current) {\n        undisposedICI.cleanup();\n      }\n    };\n  }, []);\n\n  return {\n    setState: setStateAfterCommit,\n    state: stateICI !== UNASSIGNED_STATE ? stateICI.item : UNASSIGNED_STATE,\n  };\n}\n\n// @ts-ignore\nfunction tsTests() {\n  const a = useUpdatableDisposableState();\n  // @ts-expect-error\n  a.setState([UNASSIGNED_STATE, () => {}]);\n  // @ts-expect-error\n  a.setState(['asdf', () => {}]);\n  const b = useUpdatableDisposableState<string | UnassignedState>();\n  // @ts-expect-error\n  b.setState([UNASSIGNED_STATE, () => {}]);\n  b.setState(['asdf', () => {}]);\n}\n"],"mappings":";;;;AAIA,MAAaA,mBAAkC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDvD,SAAgB,8BAE+B;CAC7C,MAAM,kBAAkB,oBAAoB;CAE5C,MAAM,iBAAiB,uBAAO,IAAI,KAAa,CAAC;CAChD,MAAM,mBAAmB,OAAO,EAAE;CAElC,MAAM,CAAC,UAAU,eAAe,SAC9B,iBACD;CAED,MAAM,sBAAsB,aACzB,oBAAwC;AACvC,MAAI,CAAC,gBAAgB,QACnB,OAAM,IAAI,MACR,gFACD;EAGH,MAAMC,MAAc;GAClB,MAAM,gBAAgB;GACtB,SAAS,gBAAgB;GACzB,OAAO,iBAAiB;GACzB;AACD,mBAAiB;AACjB,iBAAe,QAAQ,IAAI,IAAI;AAC/B,cAAY,IAAI;IAElB,CAAC,YAAY,CACd;AAED,WAAU,SAAS,0BAA0B;EAC3C,MAAM,eAAe,aAAa,mBAAmB,SAAS,QAAQ;AAEtE,MAAI,iBAAiB,EACnB;AAGF,OAAK,MAAM,iBAAiB,eAAe,SAAS;AAClD,OAAI,cAAc,UAAU,aAC1B;AAEF,kBAAe,QAAQ,OAAO,cAAc;AAC5C,iBAAc,SAAS;;GAEzB;AAEF,iBAAgB;AACd,SAAO,SAAS,2BAA2B;AACzC,QAAK,MAAM,iBAAiB,eAAe,QACzC,eAAc,SAAS;;IAG1B,EAAE,CAAC;AAEN,QAAO;EACL,UAAU;EACV,OAAO,aAAa,mBAAmB,SAAS,OAAO;EACxD"}
+{"version":3,"file":"useUpdatableDisposableState.mjs","names":[],"sources":["../src/useUpdatableDisposableState.ts"],"sourcesContent":["import type { ItemCleanupPair } from '@isograph/disposable-types';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { useHasCommittedRef } from './useHasCommittedRef';\n\nexport const UNASSIGNED_STATE: unique symbol = Symbol();\nexport type UnassignedState = typeof UNASSIGNED_STATE;\n\ntype UseUpdatableDisposableStateReturnValue<T> = {\n  state: T | UnassignedState;\n  setState: (pair: ItemCleanupPair<Exclude<T, UnassignedState>>) => void;\n};\n\n/**\n * ICI stands for ItemCleanupIndex. Use a short name because it shows up a lot.\n *\n * Like an ItemCleanupPair<T>, but with an additional index and as a struct\n * for readability.\n *\n * Interally, we must keep track of the index of the state change. The disposable\n * items that are set in state are not guaranteed to be distinct according to ===,\n * as in `setState([1, dispose1]); setState([1, dispose2])`. Following this, we\n * would expect dispose1 to be called on commit. If state items were compared for\n * ===, then dispose1 would not be called in such a situation.\n *\n * Note that this comes at a runtime cost, and we may want to expose APIs that do\n * not incur this runtime cost, for example in cases where every disposable item is\n * distinguishable via ===.\n */\ntype ICI<T> = { item: T; cleanup: () => void; index: number };\n\n/**\n * useUpdatableDisposableState\n * - Returns a { state, setItem } object.\n * - setItem accepts an ItemCleanupPair<T>, and throws if called before commit.\n * - setItem sets the T in state and adds it to a set.\n * - React's behavior is that when the hook commits, whatever item is currently\n *   returned from the useState hook is the oldest item which will ever be returned\n *   from that useState hook. (More newly created ones can later be returned with\n *   concurrent mode.)\n * - When this hook commits, all items up to, but not including, the item currently\n *   returned from the useState hook are disposed and removed from the set.\n *\n * Calling setState before the hook commits:\n * - Calling setState before the hook commits is disallowed because until the hook\n *   commits, React will not schedule any unmount callbacks, meaning that if this\n *   hook never commits, any disposable items passed to setState will never be\n *   disposed.\n * - We also cannot store them in some cache, because multiple components can share\n *   the same cache location (for example, if they are loading the same query from\n *   multiple components), so updating the cache with the disposable item will cause\n *   both components to show the updated data, which is almost certainly a bug.\n * - Note that calling setState before commit is probably an anti-pattern! Consider\n *   not doing it.\n * - If you must, the workaround is to lazily load the disposable item with\n *   useDisposableState or useLazyDisposableState, and update the cache location\n *   instead of calling setState before commit. One can update the cache location\n *   by calling setState on some parent component that has already mounted, and\n *   therefore passing in different props.\n *   - This may only work in concurrent mode, though.\n */\nexport function useUpdatableDisposableState<\n  T = never,\n>(): UseUpdatableDisposableStateReturnValue<T> {\n  const hasCommittedRef = useHasCommittedRef();\n\n  const undisposedICIs = useRef(new Set<ICI<T>>());\n  const setStateCountRef = useRef(0);\n\n  const [stateICI, setStateICI] = useState<ICI<T> | UnassignedState>(\n    UNASSIGNED_STATE,\n  );\n\n  const setStateAfterCommit = useCallback(\n    (itemCleanupPair: ItemCleanupPair<T>) => {\n      if (!hasCommittedRef.current) {\n        throw new Error(\n          'Calling setState before the component has committed is unsafe and disallowed.',\n        );\n      }\n\n      const ici: ICI<T> = {\n        item: itemCleanupPair[0],\n        cleanup: itemCleanupPair[1],\n        index: setStateCountRef.current,\n      };\n      setStateCountRef.current++;\n      undisposedICIs.current.add(ici);\n      setStateICI(ici);\n    },\n    [setStateICI],\n  );\n\n  useEffect(function cleanupUnreachableItems() {\n    const indexInState = stateICI !== UNASSIGNED_STATE ? stateICI.index : 0;\n\n    if (indexInState === 0) {\n      return;\n    }\n\n    for (const undisposedICI of undisposedICIs.current) {\n      if (undisposedICI.index === indexInState) {\n        break;\n      }\n      undisposedICIs.current.delete(undisposedICI);\n      undisposedICI.cleanup();\n    }\n  });\n\n  useEffect(() => {\n    return function disposeAllRemainingItems() {\n      for (const undisposedICI of undisposedICIs.current) {\n        undisposedICIs.current.delete(undisposedICI);\n        undisposedICI.cleanup();\n      }\n      setStateICI(UNASSIGNED_STATE);\n    };\n  }, []);\n\n  return {\n    setState: setStateAfterCommit,\n    state: stateICI !== UNASSIGNED_STATE ? stateICI.item : UNASSIGNED_STATE,\n  };\n}\n\n// @ts-ignore\nfunction tsTests() {\n  const a = useUpdatableDisposableState();\n  // @ts-expect-error\n  a.setState([UNASSIGNED_STATE, () => {}]);\n  // @ts-expect-error\n  a.setState(['asdf', () => {}]);\n  const b = useUpdatableDisposableState<string | UnassignedState>();\n  // @ts-expect-error\n  b.setState([UNASSIGNED_STATE, () => {}]);\n  b.setState(['asdf', () => {}]);\n}\n"],"mappings":";;;;AAIA,MAAa,mBAAkC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDvD,SAAgB,8BAE+B;CAC7C,MAAM,kBAAkB,oBAAoB;CAE5C,MAAM,iBAAiB,uBAAO,IAAI,KAAa,CAAC;CAChD,MAAM,mBAAmB,OAAO,EAAE;CAElC,MAAM,CAAC,UAAU,eAAe,SAC9B,iBACD;CAED,MAAM,sBAAsB,aACzB,oBAAwC;AACvC,MAAI,CAAC,gBAAgB,QACnB,OAAM,IAAI,MACR,gFACD;EAGH,MAAM,MAAc;GAClB,MAAM,gBAAgB;GACtB,SAAS,gBAAgB;GACzB,OAAO,iBAAiB;GACzB;AACD,mBAAiB;AACjB,iBAAe,QAAQ,IAAI,IAAI;AAC/B,cAAY,IAAI;IAElB,CAAC,YAAY,CACd;AAED,WAAU,SAAS,0BAA0B;EAC3C,MAAM,eAAe,aAAa,mBAAmB,SAAS,QAAQ;AAEtE,MAAI,iBAAiB,EACnB;AAGF,OAAK,MAAM,iBAAiB,eAAe,SAAS;AAClD,OAAI,cAAc,UAAU,aAC1B;AAEF,kBAAe,QAAQ,OAAO,cAAc;AAC5C,iBAAc,SAAS;;GAEzB;AAEF,iBAAgB;AACd,SAAO,SAAS,2BAA2B;AACzC,QAAK,MAAM,iBAAiB,eAAe,SAAS;AAClD,mBAAe,QAAQ,OAAO,cAAc;AAC5C,kBAAc,SAAS;;AAEzB,eAAY,iBAAiB;;IAE9B,EAAE,CAAC;AAEN,QAAO;EACL,UAAU;EACV,OAAO,aAAa,mBAAmB,SAAS,OAAO;EACxD"}

package/package.json

@@ -1,20 +1,23 @@
 {
   "name": "@isograph/react-disposable-state",
-  "version": "0.5.2",
+  "version": "0.5.5",
   "description": "Primitives for managing disposable state in React",
   "homepage": "https://isograph.dev",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.cts",
   "author": "Isograph Labs",
   "license": "MIT",
   "dependencies": {
-    "@isograph/disposable-types": "0.5.2"
+    "@isograph/disposable-types": "0.5.5"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@testing-library/react": "16.3.2",
     "@types/react": "18.3.1",
+    "@types/react-test-renderer": "^18.3.0",
+    "happy-dom": "20.4.0",
     "react-test-renderer": "^18.2.0",
     "typescript": "5.6.3"
   },
@@ -27,8 +30,8 @@
   "module": "./dist/index.mjs",
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
     },
     "./package.json": "./package.json"
   },

package/src/CacheItem.test.ts

@@ -153,7 +153,45 @@ describe('CacheItem', () => {
 
       expect(() => {
         disposeTemporaryRetain();
-      }).toThrow();
+      }).toThrow('A temporary retain should only be cleared once.');
+    });
+  });
+
+  describe('Item that is temporarily retained twice', () => {
+    // A second clear of one temporary retain while the other still holds the
+    // item: without the status transition the count is decremented twice, the
+    // item leaves the parent cache, and the other holder's clear finds it in an
+    // invalid state.
+    test('Clearing the same temporary retain twice throws and leaves the other retain intact', () => {
+      const removeFromParentCache = vi.fn();
+      const disposeItem = vi.fn();
+
+      const factory = vi.fn(() => {
+        const ret: ItemCleanupPair<number> = [1, disposeItem];
+        return ret;
+      });
+      const [cacheItem, disposeTemporaryRetain1] =
+        createTemporarilyRetainedCacheItem<number>(
+          factory,
+          removeFromParentCache,
+        );
+      const disposeTemporaryRetain2 = cacheItem.temporaryRetain();
+
+      disposeTemporaryRetain1();
+      expect(() => {
+        disposeTemporaryRetain1();
+      }).toThrow('A temporary retain should only be cleared once.');
+
+      const state = getState(cacheItem);
+      assert(state.kind === 'InParentCacheAndNotDisposed');
+      expect(state.temporaryRetainCount).toEqual(1);
+      expect(removeFromParentCache).not.toHaveBeenCalled();
+      expect(disposeItem).not.toHaveBeenCalled();
+
+      disposeTemporaryRetain2();
+      expect(getState(cacheItem).kind).toEqual('NotInParentCacheAndDisposed');
+      expect(removeFromParentCache).toHaveBeenCalledOnce();
+      expect(disposeItem).toHaveBeenCalledOnce();
     });
   });
 
@@ -213,7 +251,7 @@ describe('CacheItem', () => {
 
       expect(() => {
         disposeTemporaryRetain();
-      }).toThrow();
+      }).toThrow('A temporary retain should only be cleared once.');
     });
 
     test('Item is disposed when the permanently retain is disposed', () => {

package/src/CacheItem.ts

@@ -209,6 +209,7 @@ export class CacheItem<T> {
                 'This indicates a bug in react-disposable-state.',
             );
           } else if (status === 'Uncleared') {
+            status = 'ClearedByCallback';
             switch (this.__state.kind) {
               case 'InParentCacheAndNotDisposed': {
                 this.__state.temporaryRetainCount--;

package/src/ParentCache.ts

@@ -3,11 +3,10 @@ import type {
   Factory,
   ItemCleanupPair,
 } from '@isograph/disposable-types';
-import type { CacheItem } from './CacheItem';
+import type { CacheItem, CacheItemOptions } from './CacheItem';
 import { createTemporarilyRetainedCacheItem } from './CacheItem';
 
 // TODO convert cache impl to a getter and setter and free functions
-// TODO accept options that get passed to CacheItem
 
 /**
  * ParentCache
@@ -28,11 +27,13 @@ import { createTemporarilyRetainedCacheItem } from './CacheItem';
 export class ParentCache<T> {
   private __cacheItem: CacheItem<T> | null = null;
   private readonly __factory: Factory<T>;
+  private readonly __options: CacheItemOptions | void;
 
   // TODO pass an onEmpty function, which can e.g. remove this ParentCache
   // from some parent object.
-  constructor(factory: Factory<T>) {
+  constructor(factory: Factory<T>, options?: CacheItemOptions) {
     this.__factory = factory;
+    this.__options = options;
   }
 
   /**
@@ -59,24 +60,28 @@ export class ParentCache<T> {
 
   private __populateAndTemporaryRetain(): [CacheItem<T>, T, CleanupFn] {
     const pair: ItemCleanupPair<CacheItem<T>> =
-      createTemporarilyRetainedCacheItem(this.__factory, () => {
-        // We are doing this check because we don't want to remove the cache item
-        // if it is not the one that was created when the temporary retain was created.
-        //
-        // Consider the following scenario:
-        // - we populate the cache with CacheItem A,
-        // - then manually delete CacheItem A (e.g. to force a refetch)
-        // - then, we re-populate the parent cache with CacheItem B
-        // - then, the temporary retain of CacheItem A is disposed or expires.
-        //
-        // At this point, we don't want to delete CacheItem B from the cache.
-        //
-        // TODO consider what happens if items are === comparable to each other,
-        // e.g. the item is a number!
-        if (this.__cacheItem === pair[0]) {
-          this.empty();
-        }
-      });
+      createTemporarilyRetainedCacheItem(
+        this.__factory,
+        () => {
+          // We are doing this check because we don't want to remove the cache item
+          // if it is not the one that was created when the temporary retain was created.
+          //
+          // Consider the following scenario:
+          // - we populate the cache with CacheItem A,
+          // - then manually delete CacheItem A (e.g. to force a refetch)
+          // - then, we re-populate the parent cache with CacheItem B
+          // - then, the temporary retain of CacheItem A is disposed or expires.
+          //
+          // At this point, we don't want to delete CacheItem B from the cache.
+          //
+          // TODO consider what happens if items are === comparable to each other,
+          // e.g. the item is a number!
+          if (this.__cacheItem === pair[0]) {
+            this.empty();
+          }
+        },
+        this.__options,
+      );
 
     // We deconstruct this here instead of at the definition site because otherwise,
     // typescript thinks that cacheItem is any, because it's referenced in the closure.

package/src/index.ts

@@ -4,6 +4,8 @@ export * from './CacheItem';
 export * from './ParentCache';
 export * from './useCachedResponsivePrecommitValue';
 export * from './useDisposableState';
+export * from './useEffectsRerunWithoutRender';
 export * from './useHasCommittedRef';
 export * from './useLazyDisposableState';
+export * from './useUpdatableDisposableClearableState';
 export * from './useUpdatableDisposableState';

package/src/useCachedResponsivePrecommitValue.test.tsx

@@ -1,5 +1,9 @@
 import type { ItemCleanupPair } from '@isograph/disposable-types';
-import React, { type MutableRefObject } from 'react';
+import React, {
+  StrictMode,
+  type MutableRefObject,
+  type ReactElement,
+} from 'react';
 import { create } from 'react-test-renderer';
 import { assert, describe, expect, test, vi } from 'vitest';
 import type { CacheItem, CacheItemState } from './CacheItem';
@@ -52,9 +56,10 @@ function promiseAndResolver() {
 
 // The fact that sometimes we need to render in concurrent mode and sometimes
 // not is a bit worrisome.
-async function awaitableCreate(Component, isConcurrent: boolean) {
+async function awaitableCreate(Component: ReactElement, isConcurrent: boolean) {
   const element = create(
-    Component,
+    <StrictMode>{Component}</StrictMode>,
+    // @ts-expect-error
     isConcurrent ? { unstable_isConcurrent: true } : undefined,
   );
   await shortPromise();

package/src/useCachedResponsivePrecommitValue.ts

@@ -3,6 +3,7 @@
 import type { ItemCleanupPair } from '@isograph/disposable-types';
 import { useEffect, useRef, useState } from 'react';
 import type { ParentCache } from './ParentCache';
+import { useEffectsRerunWithoutRenderRef } from './useEffectsRerunWithoutRender';
 
 /**
  * useCachedResponsivePrecommitValue<T>
@@ -49,6 +50,8 @@ export function useCachedResponsivePrecommitValue<T>(
   const [, rerender] = useState<{} | null>(null);
   const lastCommittedParentCache = useRef<ParentCache<T> | null>(null);
 
+  const effectsRerunWithoutRenderRef = useEffectsRerunWithoutRenderRef();
+
   useEffect(() => {
     lastCommittedParentCache.current = parentCache;
     // On commit, cacheItem may be disposed, because during the render phase,
@@ -67,28 +70,37 @@ export function useCachedResponsivePrecommitValue<T>(
     //
     // After the above, we have a non-disposed item and a cleanup function, which we
     // can pass to onCommit.
-    const undisposedPair = cacheItem.permanentRetainIfNotDisposed(
-      disposeOfTemporaryRetain,
-    );
-    if (undisposedPair != null) {
-      onCommit(undisposedPair);
-    } else {
-      // The cache item we created during render has been disposed. Check if the parent
-      // cache is populated.
-      const existingCacheItemCleanupPair =
-        parentCache.getAndPermanentRetainIfPresent();
-      if (existingCacheItemCleanupPair != null) {
-        onCommit(existingCacheItemCleanupPair);
-      } else {
-        // We did not find an item in the parent cache, create a new one.
-        onCommit(parentCache.factory());
+    //
+    // When this effect runs again without a render (StrictMode's simulated
+    // remount, Fast Refresh, Activity), the render's temporary retain was
+    // already converted by the first run and released by the cleanup, so the
+    // item is re-acquired from the parent cache below instead.
+    if (!effectsRerunWithoutRenderRef.current) {
+      const undisposedPair = cacheItem.permanentRetainIfNotDisposed(
+        disposeOfTemporaryRetain,
+      );
+      if (undisposedPair != null) {
+        onCommit(undisposedPair);
+        return;
       }
-      // 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({});
     }
+    effectsRerunWithoutRenderRef.current = false;
+
+    // The cache item we created during render has been disposed. Check if the parent
+    // cache is populated.
+    const existingCacheItemCleanupPair =
+      parentCache.getAndPermanentRetainIfPresent();
+    if (existingCacheItemCleanupPair != null) {
+      onCommit(existingCacheItemCleanupPair);
+    } else {
+      // 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]);
 
   if (lastCommittedParentCache.current === parentCache) {

package/src/useDisposableState.ts

@@ -21,7 +21,6 @@ export function useDisposableState<T = never>(
   const preCommitItem = useCachedResponsivePrecommitValue(
     parentCache,
     (pair) => {
-      itemCleanupPairRef.current?.[1]();
       itemCleanupPairRef.current = pair;
     },
   );
@@ -35,25 +34,25 @@ export function useDisposableState<T = never>(
         if (itemCleanupPairRef.current != null) {
           itemCleanupPairRef.current[1]();
           itemCleanupPairRef.current = null;
-        } else {
-          throw new Error(
-            'itemCleanupPairRef.current is unexpectedly null. ' +
-              'This indicates a bug in react-disposable-state.',
-          );
         }
       }
     },
     [stateFromDisposableStateHook],
   );
 
-  useEffect(function cleanupItemCleanupPairRefIfSetStateNotCalled() {
-    return () => {
-      if (itemCleanupPairRef.current != null) {
-        itemCleanupPairRef.current[1]();
-        itemCleanupPairRef.current = null;
-      }
-    };
-  }, []);
+  useEffect(
+    function cleanupItemCleanupPairRefIfSetStateNotCalled() {
+      return () => {
+        if (itemCleanupPairRef.current != null) {
+          itemCleanupPairRef.current[1]();
+          // Forgotten so that nothing can release this pair a second time
+          // before an effect re-run (StrictMode, Fast Refresh) stores a new one.
+          itemCleanupPairRef.current = null;
+        }
+      };
+    },
+    [parentCache],
+  );
   const state: T | undefined =
     (stateFromDisposableStateHook !== UNASSIGNED_STATE
       ? stateFromDisposableStateHook
@@ -67,7 +66,6 @@ export function useDisposableState<T = never>(
       setState,
     };
   }
-
   // Safety: we can be in one of three states. Pre-commit, in which case
   // preCommitItem is assigned, post-commit but before setState has been
   // called, in which case itemCleanupPairRef.current is assigned, or

package/src/useEffectsRerunWithoutRender.test.tsx

@@ -0,0 +1,54 @@
+import { render } from '@testing-library/react';
+import React, { useEffect } from 'react';
+import { describe, expect, test } from 'vitest';
+import { useEffectsRerunWithoutRenderRef } from './useEffectsRerunWithoutRender';
+
+function Probe({ dep, reports }: { dep: number; reports: boolean[] }) {
+  const effectsRerunWithoutRenderRef = useEffectsRerunWithoutRenderRef();
+  useEffect(() => {
+    reports.push(effectsRerunWithoutRenderRef.current);
+    effectsRerunWithoutRenderRef.current = false;
+  }, [dep, effectsRerunWithoutRenderRef]);
+  return null;
+}
+
+describe('useEffectsRerunWithoutRenderRef', () => {
+  test('under StrictMode, the first mount reads false and the simulated remount reads true', () => {
+    const reports: boolean[] = [];
+    render(<Probe dep={0} reports={reports} />, { reactStrictMode: true });
+
+    expect(reports).toEqual([false, true]);
+  });
+
+  test('without StrictMode, the mount reads false', () => {
+    const reports: boolean[] = [];
+    render(<Probe dep={0} reports={reports} />, { reactStrictMode: false });
+
+    expect(reports).toEqual([false]);
+  });
+
+  test('an effect run caused by a render reads false, once the remount has reset the ref', () => {
+    const reports: boolean[] = [];
+    const { rerender } = render(<Probe dep={0} reports={reports} />, {
+      reactStrictMode: true,
+    });
+    rerender(<Probe dep={1} reports={reports} />);
+
+    expect(reports).toEqual([false, true, false]);
+  });
+
+  test('the ref stays true until the caller resets it', () => {
+    const reads: boolean[] = [];
+    function NeverResets() {
+      const effectsRerunWithoutRenderRef = useEffectsRerunWithoutRenderRef();
+      useEffect(() => {
+        reads.push(effectsRerunWithoutRenderRef.current);
+      });
+      return null;
+    }
+    const { rerender } = render(<NeverResets />, { reactStrictMode: true });
+    rerender(<NeverResets />);
+
+    expect(reads).toEqual([false, true, true]);
+  });
+});

package/src/useEffectsRerunWithoutRender.ts

@@ -0,0 +1,23 @@
+import { type MutableRefObject, useEffect, useRef } from 'react';
+
+/**
+ * Detects that React is running this component's effects again without a
+ * render in between. That happens on StrictMode's simulated unmount and
+ * remount on the first commit, on Fast Refresh, and when an `Activity`
+ * boundary hides and then shows the component. In each case React runs every
+ * effect's cleanup and then its mount, so a cleanup that sets a flag is
+ * observable from the mounts that follow.
+ *
+ * Returns a ref whose `current` is `true` from the moment the cleanup ran until
+ * the caller resets it. The effect that must tell a re-run apart from a first
+ * mount reads it and sets it back to `false`; nothing else clears it.
+ */
+export function useEffectsRerunWithoutRenderRef(): MutableRefObject<boolean> {
+  const effectsRerunWithoutRenderRef = useRef(false);
+  useEffect(() => {
+    return () => {
+      effectsRerunWithoutRenderRef.current = true;
+    };
+  }, []);
+  return effectsRerunWithoutRenderRef;
+}

package/src/useHasCommittedRef.ts

@@ -1,11 +1,15 @@
-import { type MutableRefObject, useEffect, useRef } from 'react';
+import { type MutableRefObject, useInsertionEffect, useRef } from 'react';
 
 /**
  * Returns true if the component has committed, false otherwise.
+ *
+ * Set in an insertion effect, which React runs in the mutation phase of the commit, before any layout or passive
+ * effect of the commit. Layout and passive effects of the component's children, and DOM event handlers that run
+ * before the passive effects are flushed, therefore read true.
  */
 export function useHasCommittedRef(): MutableRefObject<boolean> {
   const hasCommittedRef = useRef(false);
-  useEffect(() => {
+  useInsertionEffect(() => {
     hasCommittedRef.current = true;
   }, []);
   return hasCommittedRef;

package/src/useLazyDisposableState.test.tsx

@@ -1,9 +1,9 @@
 import type { 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 { configure, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 import { ParentCache } from './ParentCache';
 import { useLazyDisposableState } from './useLazyDisposableState';
+configure({ reactStrictMode: true });
 
 function createCache<T>(value: T) {
   const disposeItem = vi.fn();
@@ -26,46 +26,85 @@ function promiseWithResolvers() {
 }
 
 describe('useLazyDisposableState', async () => {
-  test('on cache change, it should dispose previous cache', async () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test('on render it should read the cache', async () => {
     const cache1 = createCache(1);
-    const cache2 = createCache(2);
-    const renders = vi.fn();
 
-    let unmounted = promiseWithResolvers();
-    let committed = promiseWithResolvers();
+    const { result } = renderHook(
+      (props) => useLazyDisposableState(props.parentCache),
+      {
+        initialProps: {
+          parentCache: cache1.cache,
+        },
+      },
+    );
 
-    function TestComponent() {
-      const [cache, setCache] = useState(cache1.cache);
-      const { state } = useLazyDisposableState(cache);
+    expect(result.current.state).toEqual(1);
+    expect(cache1.cache.factory).toHaveBeenCalledOnce();
+  });
 
-      useEffect(() => {
-        setCache(cache2.cache);
+  test('on unmount it should dispose the cache', async () => {
+    const cache1 = createCache(1);
 
-        return () => {
-          unmounted.resolve();
-        };
-      }, []);
+    const { unmount } = renderHook(
+      (props) => useLazyDisposableState(props.parentCache),
+      {
+        initialProps: {
+          parentCache: cache1.cache,
+        },
+      },
+    );
 
-      useEffect(() => {
-        if (state === 1) return;
-        committed.resolve();
-      }, [state]);
+    unmount();
+    vi.runAllTimers();
+    expect(cache1.disposeItem).toHaveBeenCalledOnce();
+  });
 
-      renders(state);
+  test('on cache change, it should read new cache', async () => {
+    const cache1 = createCache(1);
+    const cache2 = createCache(2);
 
-      return null;
-    }
+    const { result, rerender, unmount } = renderHook(
+      (props) => useLazyDisposableState(props.parentCache),
+      {
+        initialProps: {
+          parentCache: cache1.cache,
+        },
+      },
+    );
 
-    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();
+    rerender({
+      parentCache: cache2.cache,
+    });
+
+    expect(result.current.state).toEqual(2);
     expect(cache2.cache.factory).toHaveBeenCalledOnce();
-    expect(renders).toHaveBeenNthCalledWith(1, 1);
-    expect(renders).toHaveBeenNthCalledWith(2, 2);
-    expect(renders).toHaveBeenCalledTimes(2);
+  });
+
+  test('on cache change, it should dispose previous cache', async () => {
+    const cache1 = createCache(1);
+    const cache2 = createCache(2);
+
+    const { rerender } = renderHook(
+      (props) => useLazyDisposableState(props.parentCache),
+      {
+        initialProps: {
+          parentCache: cache1.cache,
+        },
+      },
+    );
+
+    rerender({
+      parentCache: cache2.cache,
+    });
+
+    vi.runAllTimers();
+    expect(cache1.disposeItem).toHaveBeenCalledOnce();
   });
 });

package/src/useLazyDisposableState.ts

@@ -1,6 +1,6 @@
 'use strict';
 
-import type { ItemCleanupPair } from '@isograph/isograph-disposable-types';
+import type { ItemCleanupPair } from '@isograph/disposable-types';
 import { useEffect, useRef } from 'react';
 import type { ParentCache } from './ParentCache';
 import { useCachedResponsivePrecommitValue } from './useCachedResponsivePrecommitValue';
@@ -21,11 +21,9 @@ export function useLazyDisposableState<T>(
   state: T;
 } {
   const itemCleanupPairRef = useRef<ItemCleanupPair<T> | null>(null);
-
   const preCommitItem = useCachedResponsivePrecommitValue(
     parentCache,
     (pair) => {
-      itemCleanupPairRef.current?.[1]();
       itemCleanupPairRef.current = pair;
     },
   );
@@ -39,9 +37,10 @@ export function useLazyDisposableState<T>(
           'cleanupFn unexpectedly null. This indicates a bug in react-disposable-state.',
         );
       }
-      return cleanupFn();
+      cleanupFn();
+      itemCleanupPairRef.current = null;
     };
-  }, []);
+  }, [parentCache]);
 
   const returnedItem = preCommitItem?.state ?? itemCleanupPairRef.current?.[0];