perf(services): avoid rerenders for region column

Closes DCOS-51377
dcos · Apr 10, 2019 · 7d12aa8 · 7d12aa8
1 parent ed03e91
commit 7d12aa8
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/plugins/services/src/js/columns/ServicesTableRegionColumn.tsx b/plugins/services/src/js/columns/ServicesTableRegionColumn.tsx
@@ -8,6 +8,14 @@ import ServiceTree from "../structs/ServiceTree";
 import { SortDirection } from "plugins/services/src/js/types/SortDirection";
 import ServiceTableUtil from "../utils/ServiceTableUtil";
 
+const ServiceRegion = React.memo(({ regions }: { regions: string }) => (
+  <TextCell>
+    <Tooltip elementTag="span" wrapText={true} content={regions}>
+      {regions}
+    </Tooltip>
+  </TextCell>
+));
+
 export function regionRendererFactory(localRegion: string | undefined) {
   return (service: Service | Pod | ServiceTree) => {
     let regions: string[] = service.getRegions();
@@ -20,13 +28,7 @@ export function regionRendererFactory(localRegion: string | undefined) {
       regions.push("N/A");
     }
 
-    return (
-      <TextCell>
-        <Tooltip elementTag="span" wrapText={true} content={regions.join(", ")}>
-          {regions.join(", ")}
-        </Tooltip>
-      </TextCell>
-    );
+    return <ServiceRegion regions={regions.join(", ")} />;
   };
 }
 export function regionSorter(