refactor(react/svelte): use nodeLookup

packages/react/src/hooks/useReactFlow.ts

@@ -35,7 +35,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
   }, []);
 
   const getNode = useCallback<Instance.GetNode<NodeData>>((id) => {
-    return store.getState().nodes.find((n) => n.id === id);
+    return store.getState().nodeLookup.get(id);
   }, []);
 
   const getEdges = useCallback<Instance.GetEdges<EdgeData>>(() => {
@@ -181,7 +181,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
       nodeOrRect: Node<NodeData> | { id: Node['id'] } | Rect
     ): [Rect | null, Node<NodeData> | null | undefined, boolean] => {
       const isRect = isRectObject(nodeOrRect);
-      const node = isRect ? null : store.getState().nodes.find((n) => n.id === nodeOrRect.id);
+      const node = isRect ? null : store.getState().nodeLookup.get(nodeOrRect.id);
 
       if (!isRect && !node) {
         [null, null, isRect];

packages/react/src/hooks/useUpdateNodeInternals.ts

@@ -8,17 +8,16 @@ function useUpdateNodeInternals(): UpdateNodeInternals {
 
   return useCallback<UpdateNodeInternals>((id: string | string[]) => {
     const { domNode, updateNodeDimensions } = store.getState();
-
     const updateIds = Array.isArray(id) ? id : [id];
-    const updates = updateIds.reduce<NodeDimensionUpdate[]>((res, updateId) => {
+    const updates = new Map<string, NodeDimensionUpdate>();
+
+    updateIds.forEach((updateId) => {
       const nodeElement = domNode?.querySelector(`.react-flow__node[data-id="${updateId}"]`) as HTMLDivElement;
 
       if (nodeElement) {
-        res.push({ id: updateId, nodeElement, forceUpdate: true });
+        updates.set(updateId, { id: updateId, nodeElement, forceUpdate: true });
       }
-
-      return res;
-    }, []);
+    });
 
     requestAnimationFrame(() => updateNodeDimensions(updates));
   }, []);

packages/react/src/hooks/useVisibleEdges.ts

@@ -12,8 +12,8 @@ function useVisibleEdges(onlyRenderVisible: boolean, elevateEdgesOnSelect: boole
         const visibleEdges =
           onlyRenderVisible && s.width && s.height
             ? s.edges.filter((e) => {
-                const sourceNode = s.nodesLookup.get(e.source);
-                const targetNode = s.nodesLookup.get(e.target);
+                const sourceNode = s.nodeLookup.get(e.source);
+                const targetNode = s.nodeLookup.get(e.target);
 
                 return (
                   sourceNode &&
@@ -29,7 +29,7 @@ function useVisibleEdges(onlyRenderVisible: boolean, elevateEdgesOnSelect: boole
               })
             : s.edges;
 
-        return groupEdgesByZLevel(visibleEdges, s.nodesLookup, elevateEdgesOnSelect);
+        return groupEdgesByZLevel(visibleEdges, s.nodeLookup, elevateEdgesOnSelect);
       },
       [onlyRenderVisible, elevateEdgesOnSelect]
     ),