Wrap PageTemplate in useMemo to prevent state reinitialization

elastic · Apr 24, 2023 · fcd224c · fcd224c
1 parent 52b5b5f
commit fcd224c
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 36 deletions.
diff --git a/packages/content-management/table_list/src/components/table.tsx b/packages/content-management/table_list/src/components/table.tsx
@@ -110,31 +110,32 @@ export function Table<T extends UserContentCommonSchema>({
     );
   }, [deleteItems, dispatch, entityName, entityNamePlural, selectedIds.length]);
 
-  let selection: EuiTableSelectionType<T> | undefined;
-
-  if (deleteItems) {
-    selection = {
-      onSelectionChange: (obj: T[]) => {
-        dispatch({ type: 'onSelectionChange', data: obj });
-      },
-      selectable: (obj) => {
-        const actions = tableItemsRowActions[obj.id];
-        return actions?.delete?.enabled !== false;
-      },
-      selectableMessage: (selectable, obj) => {
-        if (!selectable) {
+  const selection = useMemo<EuiTableSelectionType<T> | undefined>(() => {
+    if (deleteItems) {
+      return {
+        onSelectionChange: (obj: T[]) => {
+          dispatch({ type: 'onSelectionChange', data: obj });
+        },
+        selectable: (obj) => {
           const actions = tableItemsRowActions[obj.id];
-          return (
-            actions?.delete?.reason ??
-            i18n.translate('contentManagement.tableList.actionsDisabledLabel', {
-              defaultMessage: 'Actions disabled for this item',
-            })
-          );
-        }
-        return '';
-      },
-    };
-  }
+          return actions?.delete?.enabled !== false;
+        },
+        selectableMessage: (selectable, obj) => {
+          if (!selectable) {
+            const actions = tableItemsRowActions[obj.id];
+            return (
+              actions?.delete?.reason ??
+              i18n.translate('contentManagement.tableList.actionsDisabledLabel', {
+                defaultMessage: 'Actions disabled for this item',
+              })
+            );
+          }
+          return '';
+        },
+        initialSelected: [],
+      };
+    }
+  }, [deleteItems, dispatch, tableItemsRowActions]);
 
   const {
     isPopoverOpen,
@@ -237,6 +238,7 @@ export function Table<T extends UserContentCommonSchema>({
       data-test-subj="itemsInMemTable"
       rowHeader="attributes.title"
       tableCaption={tableCaption}
+      isSelectable
     />
   );
 }
diff --git a/packages/content-management/table_list/src/table_list_view.tsx b/packages/content-management/table_list/src/table_list_view.tsx
@@ -870,25 +870,27 @@ function TableListViewComp<T extends UserContentCommonSchema>({
     };
   }, []);
 
+  const PageTemplate = useMemo<typeof KibanaPageTemplate>(() => {
+    return withoutPageTemplateWrapper
+      ? ((({
+          children: _children,
+          'data-test-subj': dataTestSubj,
+        }: {
+          children: React.ReactNode;
+          ['data-test-subj']?: string;
+        }) => (
+          <div data-test-subj={dataTestSubj}>{_children}</div>
+        )) as unknown as typeof KibanaPageTemplate)
+      : KibanaPageTemplate;
+  }, [withoutPageTemplateWrapper]);
+
   // ------------
   // Render
   // ------------
   if (!hasInitialFetchReturned) {
     return null;
   }
 
-  const PageTemplate = withoutPageTemplateWrapper
-    ? ((({
-        children: _children,
-        'data-test-subj': dataTestSubj,
-      }: {
-        children: React.ReactNode;
-        ['data-test-subj']?: string;
-      }) => (
-        <div data-test-subj={dataTestSubj}>{_children}</div>
-      )) as unknown as typeof KibanaPageTemplate)
-    : KibanaPageTemplate;
-
   if (!showFetchError && hasNoItems) {
     return (
       <PageTemplate panelled isEmptyState={true} data-test-subj={pageDataTestSubject}>