@headless-tree/react 0.0.0-20250807163338 → 0.0.0-20250818215955

package/CHANGELOG.md

@@ -1,22 +1,22 @@
 # @headless-tree/react
 
-## 0.0.0-20250807163338
+## 0.0.0-20250818215955
+
+### Patch Changes
+
+- Updated dependencies [8d53b4f]
+- Updated dependencies [7ef4864]
+- Updated dependencies [1cee368]
+- Updated dependencies [1e833bb]
+  - @headless-tree/core@0.0.0-20250818215955
+
+## 1.3.0
 
 ### Patch Changes
 
 - 32e71e9: Added optional @headless-tree/react/react17 import for useTree for compatibility
 - 662e2a8: Improved customizability of checkboxes feature (still alpha state), allowing you to customize `propagateCheckedState` and `canCheckFolders` independently
 - 662e2a8: Changed to new buildtool in core packages (now using tsup) to hopefully fix some ESM/CJS integrations
-- Updated dependencies [e8ddbb0]
-- Updated dependencies [662e2a8]
-- Updated dependencies [b41e1d2]
-- Updated dependencies [b413f74]
-- Updated dependencies [a250b3b]
-- Updated dependencies [21d1679]
-- Updated dependencies [62867e8]
-- Updated dependencies [662e2a8]
-- Updated dependencies [662e2a8]
-  - @headless-tree/core@0.0.0-20250807163338
 
 ## 1.2.1
 

package/dist/index.js

@@ -123,7 +123,24 @@ var AssistiveTreeDescription = (_a) => {
 // src/use-tree.tsx
 var import_react2 = require("react");
 var import_core2 = require("@headless-tree/core");
+var useApplyAfterMount = () => {
+  const isMounted = (0, import_react2.useRef)(false);
+  const callbacks = (0, import_react2.useRef)([]);
+  (0, import_react2.useEffect)(() => {
+    isMounted.current = true;
+    callbacks.current.forEach((callback) => callback());
+  }, []);
+  const apply = (callback) => {
+    if (isMounted.current) {
+      callback();
+    } else {
+      callbacks.current.push(callback);
+    }
+  };
+  return apply;
+};
 var useTree = (config) => {
+  const apply = useApplyAfterMount();
   const [tree] = (0, import_react2.useState)(() => ({ current: (0, import_core2.createTree)(config) }));
   const [state, setState] = (0, import_react2.useState)(
     () => tree.current.getState()
@@ -131,16 +148,16 @@ var useTree = (config) => {
   (0, import_react2.useEffect)(() => {
     tree.current.rebuildTree();
   }, [tree]);
-  (0, import_react2.useInsertionEffect)(() => {
-    tree.current.setConfig((prev) => __spreadProps(__spreadValues(__spreadValues({}, prev), config), {
-      state: __spreadValues(__spreadValues({}, state), config.state),
-      setState: (state2) => {
+  tree.current.setConfig((prev) => __spreadProps(__spreadValues(__spreadValues({}, prev), config), {
+    state: __spreadValues(__spreadValues({}, state), config.state),
+    setState: (state2) => {
+      apply(() => {
         var _a;
         setState(state2);
         (_a = config.setState) == null ? void 0 : _a.call(config, state2);
-      }
-    }));
-  });
+      });
+    }
+  }));
   return tree.current;
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -63,9 +63,26 @@ var AssistiveTreeDescription = (_a) => {
 };
 
 // src/use-tree.tsx
-import { useEffect, useInsertionEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { createTree } from "@headless-tree/core";
+var useApplyAfterMount = () => {
+  const isMounted = useRef(false);
+  const callbacks = useRef([]);
+  useEffect(() => {
+    isMounted.current = true;
+    callbacks.current.forEach((callback) => callback());
+  }, []);
+  const apply = (callback) => {
+    if (isMounted.current) {
+      callback();
+    } else {
+      callbacks.current.push(callback);
+    }
+  };
+  return apply;
+};
 var useTree = (config) => {
+  const apply = useApplyAfterMount();
   const [tree] = useState(() => ({ current: createTree(config) }));
   const [state, setState] = useState(
     () => tree.current.getState()
@@ -73,16 +90,16 @@ var useTree = (config) => {
   useEffect(() => {
     tree.current.rebuildTree();
   }, [tree]);
-  useInsertionEffect(() => {
-    tree.current.setConfig((prev) => __spreadProps(__spreadValues(__spreadValues({}, prev), config), {
-      state: __spreadValues(__spreadValues({}, state), config.state),
-      setState: (state2) => {
+  tree.current.setConfig((prev) => __spreadProps(__spreadValues(__spreadValues({}, prev), config), {
+    state: __spreadValues(__spreadValues({}, state), config.state),
+    setState: (state2) => {
+      apply(() => {
         var _a;
         setState(state2);
         (_a = config.setState) == null ? void 0 : _a.call(config, state2);
-      }
-    }));
-  });
+      });
+    }
+  }));
   return tree.current;
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-tree/react",
-  "version": "0.0.0-20250807163338",
+  "version": "0.0.0-20250818215955",
   "main": "dist/index.d.ts",
   "module": "dist/index.mjs",
   "types": "dist/index.d.mts",
@@ -52,7 +52,7 @@
     "typescript": "^5.7.2"
   },
   "peerDependencies": {
-    "@headless-tree/core": "0.0.0-20250807163338",
+    "@headless-tree/core": "0.0.0-20250818215955",
     "react": "*",
     "react-dom": "*"
   }

package/src/use-tree.tsx

@@ -1,7 +1,34 @@
-import { useEffect, useInsertionEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { TreeConfig, TreeState, createTree } from "@headless-tree/core";
 
+/* A bug with NextJS was reported in the past where very quick state updates (i.e. data
+ * loader returning withing milliseconds) will cause the state update to occur before
+ * mount, resulting in a console warning. This alleviates this.
+ * We should monitor if this remains a problem in the future, maybe we can eventually
+ * remove this workaround...
+ */
+const useApplyAfterMount = () => {
+  const isMounted = useRef(false);
+  const callbacks = useRef<(() => void)[]>([]);
+
+  useEffect(() => {
+    isMounted.current = true;
+    callbacks.current.forEach((callback) => callback());
+  }, []);
+
+  const apply = (callback: () => void) => {
+    if (isMounted.current) {
+      callback();
+    } else {
+      callbacks.current.push(callback);
+    }
+  };
+
+  return apply;
+};
+
 export const useTree = <T,>(config: TreeConfig<T>) => {
+  const apply = useApplyAfterMount();
   const [tree] = useState(() => ({ current: createTree(config) }));
   const [state, setState] = useState<Partial<TreeState<T>>>(() =>
     tree.current.getState(),
@@ -11,21 +38,20 @@ export const useTree = <T,>(config: TreeConfig<T>) => {
     tree.current.rebuildTree();
   }, [tree]); // runs only once after mount
 
-  useInsertionEffect(() => {
-    tree.current.setConfig((prev) => ({
-      ...prev,
-      ...config,
-      state: {
-        // ...prev.state,
-        ...state,
-        ...config.state,
-      },
-      setState: (state) => {
+  tree.current.setConfig((prev) => ({
+    ...prev,
+    ...config,
+    state: {
+      ...state,
+      ...config.state,
+    },
+    setState: (state) => {
+      apply(() => {
         setState(state);
         config.setState?.(state);
-      },
-    }));
-  });
+      });
+    },
+  }));
 
   return tree.current;
 };