fix(striker-ui): wrap network init render variables in hooks to reduce compute

striker-ui/components/NetworkInitForm.tsx

@@ -238,7 +238,7 @@ const createNetworkInterfaceTableColumns = (
 ];
 
 const NetworkForm: FC<{
-  createDropMouseUpHandler: (
+  createDropMouseUpHandler?: (
     interfaces: (NetworkInterfaceOverviewMetadata | undefined)[],
     interfaceIndex: number,
   ) => MUIBoxProps['onMouseUp'];
@@ -416,6 +416,8 @@ const NetworkForm: FC<{
   );
 };
 
+NetworkForm.defaultProps = { createDropMouseUpHandler: undefined };
+
 const NetworkInitForm = forwardRef<NetworkInitFormForwardRefContent>(
   (networkInitFormProps, ref) => {
     const [dragMousePosition, setDragMousePosition] = useState<{
@@ -498,21 +500,19 @@ const NetworkInitForm = forwardRef<NetworkInitFormForwardRefContent>(
       [networkInputs],
     );
 
-    let createDropMouseUpHandler: (
+    const createDropMouseUpHandler:
+      | ((
           interfaces: (NetworkInterfaceOverviewMetadata | undefined)[],
           interfaceIndex: number,
-    ) => MUIBoxProps['onMouseUp'];
+        ) => MUIBoxProps['onMouseUp'])
-    let dragAreaDraggingSx: MUIBoxProps['sx'] = {};
+      | undefined = useMemo(() => {
-    let floatingNetworkInterface: JSX.Element = <></>;
+      if (networkInterfaceHeld === undefined) {
-    let handleDragAreaMouseLeave: MUIBoxProps['onMouseLeave'];
+        return undefined;
-    let handleDragAreaMouseMove: MUIBoxProps['onMouseMove'];
+      }
-    let handleDragAreaMouseUp: MUIBoxProps['onMouseUp'];
 
-    if (networkInterfaceHeld) {
       const { networkInterfaceUUID } = networkInterfaceHeld;
 
-      createDropMouseUpHandler =
+      return (
-        (
           interfaces: (NetworkInterfaceOverviewMetadata | undefined)[],
           interfaceIndex: number,
         ) =>
@@ -531,42 +531,63 @@ const NetworkInitForm = forwardRef<NetworkInitFormForwardRefContent>(
           interfaces[interfaceIndex] = networkInterfaceHeld;
           networkInterfaceInputMap[networkInterfaceUUID].isApplied = true;
         };
+    }, [networkInterfaceHeld, networkInterfaceInputMap]);
+    const dragAreaDraggingSx: MUIBoxProps['sx'] = useMemo(
+      () => (networkInterfaceHeld ? { cursor: 'grabbing' } : {}),
+      [networkInterfaceHeld],
+    );
+    const floatingNetworkInterface: JSX.Element = useMemo(() => {
+      if (networkInterfaceHeld === undefined) {
+        return <></>;
+      }
 
-      dragAreaDraggingSx = { cursor: 'grabbing' };
+      const { x, y } = dragMousePosition;
 
-      floatingNetworkInterface = (
+      return (
         <BriefNetworkInterface
           isFloating
           networkInterface={networkInterfaceHeld}
           sx={{
-            left: `calc(${dragMousePosition.x}px + .4em)`,
+            left: `calc(${x}px + .4em)`,
             position: 'absolute',
-            top: `calc(${dragMousePosition.y}px - 1.6em)`,
+            top: `calc(${y}px - 1.6em)`,
             zIndex: 20,
           }}
         />
       );
-
+    }, [dragMousePosition, networkInterfaceHeld]);
-      handleDragAreaMouseLeave = () => {
+    const handleDragAreaMouseLeave: MUIBoxProps['onMouseLeave'] = useMemo(
+      () =>
+        networkInterfaceHeld
+          ? () => {
               clearNetworkInterfaceHeld();
-      };
+            }
-
+          : undefined,
-      handleDragAreaMouseMove = ({
+      [clearNetworkInterfaceHeld, networkInterfaceHeld],
-        currentTarget,
+    );
-        nativeEvent: { clientX, clientY },
+    const handleDragAreaMouseMove: MUIBoxProps['onMouseMove'] = useMemo(
-      }) => {
+      () =>
+        networkInterfaceHeld
+          ? ({ currentTarget, nativeEvent: { clientX, clientY } }) => {
               const { left, top } = currentTarget.getBoundingClientRect();
 
               setDragMousePosition({
                 x: clientX - left,
                 y: clientY - top,
               });
-      };
+            }
-
+          : undefined,
-      handleDragAreaMouseUp = () => {
+      [networkInterfaceHeld],
+    );
+    const handleDragAreaMouseUp: MUIBoxProps['onMouseUp'] = useMemo(
+      () =>
+        networkInterfaceHeld
+          ? () => {
               clearNetworkInterfaceHeld();
-      };
             }
+          : undefined,
+      [clearNetworkInterfaceHeld, networkInterfaceHeld],
+    );
 
     useEffect(() => {
       const map = networkInterfaces.reduce<NetworkInterfaceInputMap>(