Pure render for useTreeData

package.json

@@ -157,9 +157,9 @@
     "postcss-import": "^15.1.0",
     "prop-types": "^15.6.0",
     "raf": "^3.4.0",
-    "react": "^18.0.0",
+    "react": "^18.3.0-canary-2cd19ed1d-20240207",
     "react-axe": "^3.0.2",
-    "react-dom": "^18.0.0",
+    "react-dom": "^18.3.0-canary-2cd19ed1d-20240207",
     "react-test-renderer": "^16.9.0",
     "recast": "^0.20",
     "recursive-readdir": "^2.2.2",

packages/@react-spectrum/listbox/stories/ListBox.stories.tsx

@@ -940,6 +940,7 @@ export function FocusExample(args = {}) {
     getKey: (item) => item.name,
     getChildren: (item:{name:string, children?:{name:string, children?:{name:string}[]}[]}) => item.children
   });
+
   let [dialog, setDialog] = useState(null);
   let ref = useRef(null);
   return (

packages/@react-spectrum/listbox/test/ListBox.test.js

@@ -889,8 +889,9 @@ describe('ListBox', function () {
   });
 
   describe('When focused item is removed', function () {
-    it('should move focus to the next item that is not disabled', () => {
+    it.only('should move focus to the next item that is not disabled', () => {
       let tree = render(<Provider theme={theme}><FocusExample /></Provider>);
+      console.log('done render')
       act(() => jest.runAllTimers());
       let listbox = tree.getByRole('listbox');
       let options = within(listbox).getAllByRole('option');
@@ -910,6 +911,7 @@ describe('ListBox', function () {
       expect(document.activeElement).toBe(confirmationDialog);
       let confirmationDialogButton = within(confirmationDialog).getByRole('button');
       expect(confirmationDialogButton).toBeInTheDocument();
+      console.log('deleting')
       triggerPress(confirmationDialogButton);
       act(() => jest.runAllTimers());
       options = within(listbox).getAllByRole('option');

packages/@react-stately/data/src/useTreeData.ts

@@ -114,7 +114,7 @@ export interface TreeData<T extends object> {
    */
   update(key: Key, newValue: T): void
 }
-
+let creation = 0;
 /**
  * Manages state for an immutable tree data structure, and provides convenience methods to
  * update the data over time.
@@ -126,17 +126,18 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
     getKey = (item: any) => item.id || item.key,
     getChildren = (item: any) => item.children
   } = options;
-  let map = useMemo(() => new Map<Key, TreeNode<T>>(), []);
 
   // We only want to compute this on initial render.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  let initialNodes = useMemo(() => buildTree(initialItems), []);
-  let [items, setItems] = useState(initialNodes);
+  let [tree, setItems] = useState(() => buildTree(initialItems));
+  let [items, map] = tree;
+
   let [selectedKeys, setSelectedKeys] = useState(new Set<Key>(initialSelectedKeys || []));
 
   function buildTree(initialItems: T[] = [], parentKey?: Key | null) {
-    return initialItems.map(item => {
+    let map = new Map<Key, TreeNode<T>>();
+    return [initialItems.map(item => {
       let node: TreeNode<T> = {
+        creation: creation++,
         key: getKey(item),
         parentKey: parentKey,
         value: item,
@@ -146,14 +147,15 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
       node.children = buildTree(getChildren(item), node.key);
       map.set(node.key, node);
       return node;
-    });
+    }), map];
   }
 
-  function updateTree(items: TreeNode<T>[], key: Key, update: (node: TreeNode<T>) => TreeNode<T>) {
-    let node = map.get(key);
+  function updateTree(items: TreeNode<T>[], key: Key, update: (node: TreeNode<T>) => TreeNode<T>, originalMap: Map<Key, TreeNode<T>>) {
+    let node = originalMap.get(key);
     if (!node) {
-      return items;
+      return [items, originalMap];
     }
+    let map = new Map<Key, TreeNode<T>>(originalMap);
 
     // Create a new node. If null, then delete the node, otherwise replace.
     let newNode = update(node);
@@ -167,6 +169,7 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
     while (node.parentKey) {
       let nextParent = map.get(node.parentKey);
       let copy: TreeNode<T> = {
+        creation: creation++,
         key: nextParent.key,
         parentKey: nextParent.parentKey,
         value: nextParent.value,
@@ -196,13 +199,14 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
       items = items.filter(c => c !== node);
     }
 
-    return items.map(item => {
+    return [items.map(item => {
+      // if (item.key === node.key) {
       if (item === node) {
         return newNode;
       }
 
       return item;
-    });
+    }), map];
   }
 
   function addNode(node: TreeNode<T>) {
@@ -227,16 +231,16 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
       return map.get(key);
     },
     insert(parentKey: Key | null, index: number, ...values: T[]) {
-      setItems(items => {
+      setItems(([items, originalMap]) => {
         let nodes = buildTree(values, parentKey);
 
         // If parentKey is null, insert into the root.
         if (parentKey == null) {
-          return [
+          return [[
             ...items.slice(0, index),
             ...nodes,
             ...items.slice(index)
-          ];
+          ], originalMap];
         }
 
         // Otherwise, update the parent node and its ancestors.
@@ -249,7 +253,7 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
             ...nodes,
             ...parentNode.children.slice(index)
           ]
-        }));
+        }), originalMap);
       });
     },
     insertBefore(key: Key, ...values: T[]): void {
@@ -292,7 +296,7 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
     remove(...keys: Key[]) {
       let newItems = items;
       for (let key of keys) {
-        newItems = updateTree(newItems, key, () => null);
+        newItems = updateTree(newItems, key, () => null, map);
       }
 
       setItems(newItems);
@@ -310,13 +314,13 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
       this.remove(...selectedKeys);
     },
     move(key: Key, toParentKey: Key | null, index: number) {
-      setItems(items => {
+      setItems(([items, originalMap]) => {
         let node = map.get(key);
         if (!node) {
           return items;
         }
 
-        items = updateTree(items, key, () => null);
+        items = updateTree(items, key, () => null, originalMap);
 
         const movedNode = {
           ...node,
@@ -325,11 +329,11 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
 
         // If parentKey is null, insert into the root.
         if (toParentKey == null) {
-          return [
+          return [[
             ...items.slice(0, index),
             movedNode,
             ...items.slice(index)
-          ];
+          ], originalMap];
         }
 
         // Otherwise, update the parent node and its ancestors.
@@ -342,11 +346,11 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
             movedNode,
             ...parentNode.children.slice(index)
           ]
-        }));
+        }), originalMap);
       });
     },
     update(oldKey: Key, newValue: T) {
-      setItems(items => updateTree(items, oldKey, oldNode => {
+      setItems(([items, originalMap]) => updateTree(items, oldKey, oldNode => {
         let node: TreeNode<T> = {
           key: oldNode.key,
           parentKey: oldNode.parentKey,
@@ -356,7 +360,7 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
 
         node.children = buildTree(getChildren(newValue), node.key);
         return node;
-      }));
+      }, originalMap));
     }
   };
 }

yarn.lock

@@ -21117,6 +21117,14 @@ react-dom@^18.0.0:
     loose-envify "^1.1.0"
     scheduler "^0.22.0"
 
+react-dom@^18.3.0-canary-2cd19ed1d-20240207:
+  version "18.3.0-canary-2cd19ed1d-20240207"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.0-canary-2cd19ed1d-20240207.tgz#24759a8eb114bd8d3d543af332fb52d0872a7281"
+  integrity sha512-vo0KNb73J0vEGvmpr6uh+q/9579liEVU9wgVH3KbaZg4+Q7j6jcneXUvwp6Vf4xxLNNOI94CwcDcDvguLm6O6A==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "0.24.0-canary-2cd19ed1d-20240207"
+
 react-element-to-jsx-string@^14.3.4:
   version "14.3.4"
   resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.4.tgz#709125bc72f06800b68f9f4db485f2c7d31218a8"
@@ -21205,6 +21213,13 @@ react@^18.0.0:
   dependencies:
     loose-envify "^1.1.0"
 
+react@^18.3.0-canary-2cd19ed1d-20240207:
+  version "18.3.0-canary-2cd19ed1d-20240207"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.0-canary-2cd19ed1d-20240207.tgz#9c1f481b71fde2d3ba3dbc38ab96e291bbb5c769"
+  integrity sha512-Fu00nsyCds3mH713G9/zjif2P3O8j49vNqmv1gMQjYi4SosmhOW2BlLOpOASwmHCpgPspYs8YTCDRAXkT+3o8g==
+  dependencies:
+    loose-envify "^1.1.0"
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -22140,6 +22155,13 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
+[email protected]:
+  version "0.24.0-canary-2cd19ed1d-20240207"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.24.0-canary-2cd19ed1d-20240207.tgz#48075b97f1afbea3ed6caf1f70ac72576f25c07f"
+  integrity sha512-9+0q2o4q0Nhlk7rGJf6sL08+Zp2qilbUkWCMhmDXC/codtdrzE9WqrxakqrpHet7NmZigcVyPKJFSWH6kS+uLw==
+  dependencies:
+    loose-envify "^1.1.0"
+
 scheduler@^0.16.2:
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.16.2.tgz#f74cd9d33eff6fc554edfb79864868e4819132c1"