@isograph/react-disposable-state 0.0.0-main-27034e7e → 0.0.0-main-977768e2

package/.turbo/turbo-compile-libs.log

@@ -1,11 +1,11 @@
 ../..                                    |  WARN  Unsupported engine: wanted: {"node":"24.12.0"} (current: {"node":"v24.21.0","pnpm":"10.15.0"})
 
-> @isograph/react-disposable-state@0.0.0-main-27034e7e compile-libs /home/runner/work/isograph/isograph/libs/isograph-react-disposable-state
+> @isograph/react-disposable-state@0.0.0-main-977768e2 compile-libs /home/runner/work/isograph/isograph/libs/isograph-react-disposable-state
 > tsdown
 
 ℹ tsdown v0.20.1 powered by rolldown v1.0.0-rc.1
 ℹ config file: /home/runner/work/isograph/isograph/tsdown.config.ts 
-(node:2574) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///home/runner/work/isograph/isograph/tsdown.config.ts?no-cache=6926acb1-ee03-4547-be0b-7c34774d56c7 is not specified and it doesn't parse as CommonJS.
+(node:2716) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///home/runner/work/isograph/isograph/tsdown.config.ts?no-cache=c38b79da-4d1e-4698-99ba-2539b6d3ec4a is not specified and it doesn't parse as CommonJS.
 Reparsing as ES module because module syntax was detected. This incurs a performance overhead.
 To eliminate this warning, add "type": "module" to /home/runner/work/isograph/isograph/package.json.
 (Use `node --trace-warnings ...` to show where the warning was created)

package/.turbo/turbo-tsc.log

@@ -1,5 +1,5 @@
 ../..                                    |  WARN  Unsupported engine: wanted: {"node":"24.12.0"} (current: {"node":"v24.21.0","pnpm":"10.15.0"})
 
-> @isograph/react-disposable-state@0.0.0-main-27034e7e tsc /home/runner/work/isograph/isograph/libs/isograph-react-disposable-state
+> @isograph/react-disposable-state@0.0.0-main-977768e2 tsc /home/runner/work/isograph/isograph/libs/isograph-react-disposable-state
 > tsc
 

package/dist/useHasCommittedRef.cjs

@@ -3,10 +3,14 @@ let react = require("react");
 //#region src/useHasCommittedRef.ts
 /**
 * 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.
 */
 function useHasCommittedRef() {
 	const hasCommittedRef = (0, react.useRef)(false);
-	(0, react.useEffect)(() => {
+	(0, react.useInsertionEffect)(() => {
 		hasCommittedRef.current = true;
 	}, []);
 	return hasCommittedRef;

package/dist/useHasCommittedRef.d.cts

@@ -3,6 +3,10 @@ import { MutableRefObject } from "react";
 //#region src/useHasCommittedRef.d.ts
 /**
  * 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.
  */
 declare function useHasCommittedRef(): MutableRefObject<boolean>;
 //#endregion

package/dist/useHasCommittedRef.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"useHasCommittedRef.d.cts","names":[],"sources":["../src/useHasCommittedRef.ts"],"mappings":";;;;;AAKA;iBAAgB,kBAAA,CAAA,GAAsB,gBAAA"}
+{"version":3,"file":"useHasCommittedRef.d.cts","names":[],"sources":["../src/useHasCommittedRef.ts"],"mappings":";;;;;AASA;;;;;iBAAgB,kBAAA,CAAA,GAAsB,gBAAA"}

package/dist/useHasCommittedRef.d.mts

@@ -3,6 +3,10 @@ import { MutableRefObject } from "react";
 //#region src/useHasCommittedRef.d.ts
 /**
  * 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.
  */
 declare function useHasCommittedRef(): MutableRefObject<boolean>;
 //#endregion

package/dist/useHasCommittedRef.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"useHasCommittedRef.d.mts","names":[],"sources":["../src/useHasCommittedRef.ts"],"mappings":";;;;;AAKA;iBAAgB,kBAAA,CAAA,GAAsB,gBAAA"}
+{"version":3,"file":"useHasCommittedRef.d.mts","names":[],"sources":["../src/useHasCommittedRef.ts"],"mappings":";;;;;AASA;;;;;iBAAgB,kBAAA,CAAA,GAAsB,gBAAA"}

package/dist/useHasCommittedRef.mjs

@@ -1,12 +1,16 @@
-import { useEffect, useRef } from "react";
+import { useInsertionEffect, useRef } from "react";
 
 //#region src/useHasCommittedRef.ts
 /**
 * 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.
 */
 function useHasCommittedRef() {
 	const hasCommittedRef = useRef(false);
-	useEffect(() => {
+	useInsertionEffect(() => {
 		hasCommittedRef.current = true;
 	}, []);
 	return hasCommittedRef;

package/dist/useHasCommittedRef.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHasCommittedRef.mjs","names":[],"sources":["../src/useHasCommittedRef.ts"],"sourcesContent":["import { type MutableRefObject, useEffect, useRef } from 'react';\n\n/**\n * Returns true if the component has committed, false otherwise.\n */\nexport function useHasCommittedRef(): MutableRefObject<boolean> {\n  const hasCommittedRef = useRef(false);\n  useEffect(() => {\n    hasCommittedRef.current = true;\n  }, []);\n  return hasCommittedRef;\n}\n"],"mappings":";;;;;;AAKA,SAAgB,qBAAgD;CAC9D,MAAM,kBAAkB,OAAO,MAAM;AACrC,iBAAgB;AACd,kBAAgB,UAAU;IACzB,EAAE,CAAC;AACN,QAAO"}
+{"version":3,"file":"useHasCommittedRef.mjs","names":[],"sources":["../src/useHasCommittedRef.ts"],"sourcesContent":["import { type MutableRefObject, useInsertionEffect, useRef } from 'react';\n\n/**\n * Returns true if the component has committed, false otherwise.\n *\n * Set in an insertion effect, which React runs in the mutation phase of the commit, before any layout or passive\n * effect of the commit. Layout and passive effects of the component's children, and DOM event handlers that run\n * before the passive effects are flushed, therefore read true.\n */\nexport function useHasCommittedRef(): MutableRefObject<boolean> {\n  const hasCommittedRef = useRef(false);\n  useInsertionEffect(() => {\n    hasCommittedRef.current = true;\n  }, []);\n  return hasCommittedRef;\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,qBAAgD;CAC9D,MAAM,kBAAkB,OAAO,MAAM;AACrC,0BAAyB;AACvB,kBAAgB,UAAU;IACzB,EAAE,CAAC;AACN,QAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isograph/react-disposable-state",
-  "version": "0.0.0-main-27034e7e",
+  "version": "0.0.0-main-977768e2",
   "description": "Primitives for managing disposable state in React",
   "homepage": "https://isograph.dev",
   "main": "./dist/index.cjs",
@@ -8,7 +8,7 @@
   "author": "Isograph Labs",
   "license": "MIT",
   "dependencies": {
-    "@isograph/disposable-types": "0.0.0-main-27034e7e"
+    "@isograph/disposable-types": "0.0.0-main-977768e2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"

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/useUpdatableDisposableState.test.tsx

@@ -1,4 +1,11 @@
-import React, { type MutableRefObject, StrictMode } from 'react';
+import type { ItemCleanupPair } from '@isograph/disposable-types';
+import { render, screen } from '@testing-library/react';
+import React, {
+  type MutableRefObject,
+  StrictMode,
+  useEffect,
+  useLayoutEffect,
+} from 'react';
 import { create } from 'react-test-renderer';
 import { describe, expect, test, vi } from 'vitest';
 import {
@@ -59,8 +66,51 @@ async function awaitableCreate(Component, isConcurrent: boolean) {
   return element;
 }
 
-describe('nothing', () => {
-  test('it should pass', () => {});
+describe('useUpdatableDisposableState during its first commit', () => {
+  // A child's effects run before its parent's effects of the same kind, and every layout effect runs before any
+  // passive effect, so a child effect runs after the parent's DOM is committed and before the parent's own effects.
+  // DOM event handlers of the parent can also run in that window.
+  test.each([
+    ['useLayoutEffect', useLayoutEffect],
+    ['useEffect', useEffect],
+  ])(
+    'setState called from a child %s puts the item in state, and the item is disposed on unmount',
+    (_effectName, useChildEffect) => {
+      const dispose = vi.fn();
+      let setStateError: unknown = null;
+      function Child({
+        setState,
+      }: {
+        setState: (pair: ItemCleanupPair<number>) => void;
+      }) {
+        useChildEffect(() => {
+          try {
+            setState([1, dispose]);
+          } catch (error) {
+            setStateError = error;
+          }
+        }, []);
+        return null;
+      }
+      function Owner() {
+        const { state, setState } = useUpdatableDisposableState<number>();
+        return (
+          <>
+            {state === UNASSIGNED_STATE ? 'unassigned' : `item ${state}`}
+            <Child setState={setState} />
+          </>
+        );
+      }
+
+      const { unmount } = render(<Owner />);
+
+      expect(setStateError).toBeNull();
+      expect(screen.getByText('item 1')).toBeTruthy();
+      expect(dispose).not.toHaveBeenCalled();
+      unmount();
+      expect(dispose).toHaveBeenCalledTimes(1);
+    },
+  );
 });
 
 // Temporarily disable unit tests until flakiness is investigated