@headless-tree/react 0.0.0-20250915162508 → 0.0.0-20250918201417

package/CHANGELOG.md

@@ -1,19 +1,25 @@
 # @headless-tree/react
 
-## 0.0.0-20250915162508
+## 0.0.0-20250918201417
+
+### Minor Changes
+
+- cbeaba6: all state updates (like setSelectedItems) will not propagate while the component is unmounted. This happened before for `tree.setState()` calls directly, but not individual state atoms like `setSelectedItems`. When calling `createTree()` directly (instead of `useTree()`), `tree.setMounted(true)` needs to be called once after mount. No changes are necessary when using the React-based `useTree()` integration. (#158)
 
 ### Patch Changes
 
 - 72e714b: all NPM deployments will now publish with provenance
 - 7a7424f: fixed incorrect exports definition in package.json for require/cjs imports (#161)
 - Updated dependencies [72e714b]
+- Updated dependencies [6693986]
 - Updated dependencies [7a7424f]
+- Updated dependencies [cbeaba6]
 - Updated dependencies [215ab4b]
 - Updated dependencies [51b0dea]
 - Updated dependencies [cf845d7]
 - Updated dependencies [597faad]
 - Updated dependencies [b0ee382]
-  - @headless-tree/core@0.0.0-20250915162508
+  - @headless-tree/core@0.0.0-20250918201417
 
 ## 1.4.0
 

package/dist/index.js

@@ -123,39 +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()
   );
   (0, import_react2.useEffect)(() => {
+    tree.current.setMounted(true);
     tree.current.rebuildTree();
+    return () => {
+      tree.current.setMounted(false);
+    };
   }, [tree]);
   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);
-      });
+      var _a;
+      setState(state2);
+      (_a = config.setState) == null ? void 0 : _a.call(config, state2);
     }
   }));
   return tree.current;

package/dist/index.mjs

@@ -63,41 +63,26 @@ var AssistiveTreeDescription = (_a) => {
 };
 
 // src/use-tree.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect, 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()
   );
   useEffect(() => {
+    tree.current.setMounted(true);
     tree.current.rebuildTree();
+    return () => {
+      tree.current.setMounted(false);
+    };
   }, [tree]);
   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);
-      });
+      var _a;
+      setState(state2);
+      (_a = config.setState) == null ? void 0 : _a.call(config, state2);
     }
   }));
   return tree.current;

package/package.json

@@ -13,7 +13,7 @@
     "checkbox",
     "hook"
   ],
-  "version": "0.0.0-20250915162508",
+  "version": "0.0.0-20250918201417",
   "main": "dist/index.d.ts",
   "module": "dist/index.mjs",
   "types": "dist/index.d.mts",
@@ -68,7 +68,7 @@
     "typescript": "^5.7.2"
   },
   "peerDependencies": {
-    "@headless-tree/core": "0.0.0-20250915162508",
+    "@headless-tree/core": "0.0.0-20250918201417",
     "react": "*",
     "react-dom": "*"
   }

package/src/use-tree.tsx

@@ -1,42 +1,20 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, 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(),
   );
 
   useEffect(() => {
+    (tree.current as any).setMounted(true);
     tree.current.rebuildTree();
-  }, [tree]); // runs only once after mount
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      (tree.current as any).setMounted(false);
+    };
+  }, [tree]);
 
   tree.current.setConfig((prev) => ({
     ...prev,
@@ -46,10 +24,8 @@ export const useTree = <T,>(config: TreeConfig<T>) => {
       ...config.state,
     },
     setState: (state) => {
-      apply(() => {
-        setState(state);
-        config.setState?.(state);
-      });
+      setState(state);
+      config.setState?.(state);
     },
   }));