diff --git a/apps/canvas/front/src/components/details.tsx b/apps/canvas/front/src/components/details.tsx
index ffac03f..d498771 100644
--- a/apps/canvas/front/src/components/details.tsx
+++ b/apps/canvas/front/src/components/details.tsx
@@ -3,7 +3,7 @@
 import { NodeDetails } from "@/components/node-details";
 import { Accordion, AccordionContent, AccordionTrigger } from "./ui/accordion";
 import { AccordionItem } from "@radix-ui/react-accordion";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { Icon } from "./icon";
 
 function unique<T>(v: T, i: number, a: T[]) {
@@ -21,23 +21,22 @@
   ["gateway-https", 8],
 ]);
 
+function cmpNodes(x: AppNode, y: AppNode): number {
+  if (x.type === y.type) {
+    if (nodeLabel(x) < nodeLabel(y)) {
+      return -1;
+    } else if (nodeLabel(x) > nodeLabel(y)) {
+      return 1;
+    }
+    return 0;
+  }
+  // TODO(gio): why !
+  return (nodeTypeIndex.get(x.type!) || 0) - (nodeTypeIndex.get(y.type!) || 0);
+}
+
 export function Details() {
   const nodes = useNodes<AppNode>();
-  const cmpNodes = useCallback(() => {
-    return (x: AppNode, y: AppNode): number => {
-      if (x.type === y.type) {
-        if (nodeLabel(x) < nodeLabel(y)) {
-          return -1;
-        } else if (nodeLabel(x) > nodeLabel(y)) {
-          return 1;
-        }
-        return 0;
-      }
-      // TODO(gio): why !
-      return (nodeTypeIndex.get(x.type!) || 0) - (nodeTypeIndex.get(y.type!) || 0);
-    };
-  }, [nodes]);
-  const sorted = useMemo(() => nodes.filter((n) => n.type !== "network").sort(cmpNodes()), [nodes, cmpNodes]);
+  const sorted = useMemo(() => nodes.filter((n) => n.type !== "network").sort(cmpNodes), [nodes]);
   const [open, setOpen] = useState<string[]>([]);
   const selected = useMemo(() => nodes.filter((n) => n.selected).map((n) => n.id), [nodes]);
   const all = useMemo(() => open.concat(selected).filter(unique), [open, selected]);