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];
 };