improved table memoization and performance

ui/src/app/components/neighbors/NeighborsTable.js

@@ -267,15 +267,16 @@ const NeighborColumn = ({neighbor, column}) => {
 }
 
 const NeighborRow = ({neighbor, columns}) => {
-  const cols = useMemo(() => columns.map((c) => 
+  return useMemo(() => {
-    <NeighborColumn 
+    const cols = columns.map((c) => 
-      key={c}
+      <NeighborColumn 
-      neighbor={neighbor}
+        key={c}
-      column={c} />
+        neighbor={neighbor}
-  ), [neighbor, columns]);
+        column={c} />);
-  return (
+    return (
-    <tr>{cols}</tr>
+      <tr>{cols}</tr>
-  );
+    );
+  }, [neighbor, columns]);
 }
 
 /**

ui/src/app/components/routes/RoutesTable.js

@@ -1,5 +1,7 @@
 
-import { useCallback }
+import { useCallback
+       , useMemo
+       }
   from 'react';
 
 
@@ -91,18 +93,35 @@ const RouteColumn = ({onClick, column, route}) => {
     "ASPath": ColAsPath,
   };
 
-  const handleClick = useCallback(() => onClick(route), [route, onClick]);
-
   let Widget = widgets[column] || ColDefault;
   return (
     <Widget
       column={column}
       route={route}
-      onClick={handleClick} />
+      onClick={onClick} />
   );
 };
 
 
+/**
+ * RoutesRow renders a memoized row
+ */
+const RoutesRow = ({columns, route, onClick}) => {
+  return useMemo(() => {
+    const callback = () => onClick(route);
+    const cols = columns.map((col) => (
+      <RouteColumn
+        key={col}
+        onClick={callback}
+        column={col}
+        route={route} />
+    ));
+    return (
+      <tr>{cols}</tr>
+    );
+  }, [columns, route, onClick]);
+}
+
 
 const RoutesTable = ({results}) => {
   const setRouteDetails = useSetRouteDetails();
@@ -119,15 +138,11 @@ const RoutesTable = ({results}) => {
   }
 
   const rows = routes.map((r, i) => (
-    <tr key={i}>
+    <RoutesRow
-      {columnsOrder.map((col) => (
+      key={i}
-        <RouteColumn
+      columns={columnsOrder}
-          key={col}
+      onClick={showAttributesModal}
-          onClick={showAttributesModal}
+      route={r} />
-          column={col}
-          route={r} />
-      ))}
-    </tr>
   ));
 
   return (