20424: Memoize process io card preview to reduce unnecessary re-renders

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>

diff --git a/src/views/process-panel/process-io-card.tsx b/src/views/process-panel/process-io-card.tsx
index 43be92406726c3b509faeab7eebc0dcf91540b90..7da91bc4012f93be6d81273101afffff7515a8ca 100644 (file)
--- a/src/views/process-panel/process-io-card.tsx
+++ b/src/views/process-panel/process-io-card.tsx
@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React, { ReactElement, useState } from 'react';
+import React, { ReactElement, memo, useState } from 'react';
 import { Dispatch } from 'redux';
 import {
     StyleRulesCallback,
@@ -384,7 +384,7 @@ interface ProcessIOPreviewDataProps {
 
 type ProcessIOPreviewProps = ProcessIOPreviewDataProps & WithStyles<CssRules>;
 
-const ProcessIOPreview = withStyles(styles)(
+const ProcessIOPreview = memo(withStyles(styles)(
     ({ classes, data, showImagePreview, valueLabel }: ProcessIOPreviewProps) => {
         const showLabel = data.some((param: ProcessIOParameter) => param.label);
         return <Table className={classes.tableRoot} aria-label="Process IO Preview">
@@ -441,7 +441,7 @@ const ProcessIOPreview = withStyles(styles)(
                 })}
             </TableBody>
         </Table >;
-    });
+    }));
 
 interface ProcessValuePreviewProps {
     value: ProcessIOValue;