Perf: EuiDataGrid don't recreate columns on every change (#2676)

CHANGELOG.md

@@ -5,6 +5,7 @@
 **Bug fixes**
 
 - Reverted removal of `toggleOpen` method from `EuiNavDrawer` ([#2682](https://github.com/elastic/eui/pull/2682))
+- Improved `EuiDataGrid` update performance ([#2676](https://github.com/elastic/eui/pull/2676))
 
 ## [`17.2.1`](https://github.com/elastic/eui/tree/v17.2.1)
 

src/components/datagrid/column_selector.tsx

@@ -1,6 +1,7 @@
 import React, {
   Fragment,
   useState,
+  useMemo,
   ReactChild,
   ReactElement,
   ChangeEvent,
@@ -199,11 +200,18 @@ export const useColumnSelector = (
     </EuiPopover>
   );
 
-  const orderedVisibleColumns = visibleColumns
-    .map<EuiDataGridColumn>(
-      columnId =>
-        availableColumns.find(({ id }) => id === columnId) as EuiDataGridColumn // cast to avoid `undefined`, it filters those out next
-    )
-    .filter(column => column != null);
+  const orderedVisibleColumns = useMemo(
+    () =>
+      visibleColumns
+        .map<EuiDataGridColumn>(
+          columnId =>
+            availableColumns.find(
+              ({ id }) => id === columnId
+            ) as EuiDataGridColumn // cast to avoid `undefined`, it filters those out next
+        )
+        .filter(column => column != null),
+    [availableColumns, visibleColumns]
+  );
+
   return [columnSelector, orderedVisibleColumns];
 };