refactor: use react useMemo

Signed-off-by: Yulong Ruan <[email protected]>

maps_dashboards/public/components/tooltip/tooltipTable.tsx

@@ -13,7 +13,7 @@ import {
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
-import React, { useState, Fragment, useCallback, useEffect } from 'react';
+import React, { useState, Fragment, useCallback, useEffect, useMemo } from 'react';
 import { DocumentLayerSpecification } from '../../model/mapLayerType';
 
 export type RowData = {
@@ -54,7 +54,7 @@ const TooltipTable = ({
 }: Props) => {
   const [selectedLayers, setSelectedLayers] = useState<EuiComboBoxOptionOption<number>[]>([
     {
-      label: tables[0].layer.name,
+      label: tables[0]?.layer.name ?? '',
       value: 0,
       key: '0',
     },
@@ -76,6 +76,7 @@ const TooltipTable = ({
   ];
 
   useEffect(() => {
+    // When selected layer changed, reset the active page to the first page
     setActivePage(0);
   }, [selectedLayers]);
 
@@ -108,18 +109,21 @@ const TooltipTable = ({
     [tables]
   );
 
-  const onSelectPage = useCallback((pageIndex) => {
-    setActivePage(pageIndex);
-  }, []);
-
-  const options = [{ label: 'All layers', value: ALL_LAYERS, key: '-1' }];
-  tables.forEach(({ layer }, i) => {
-    options.push({ label: layer.name, value: i, key: `${i}` });
-  });
-
-  const tableItems = mergeTables(
-    tables,
-    selectedLayers.map((l) => l.value ?? 0)
+  const options = useMemo(() => {
+    const layerOptions = [{ label: 'All layers', value: ALL_LAYERS, key: '-1' }];
+    tables.forEach(({ layer }, i) => {
+      layerOptions.push({ label: layer.name, value: i, key: `${i}` });
+    });
+    return layerOptions;
+  }, [tables]);
+
+  const tableItems = useMemo(
+    () =>
+      mergeTables(
+        tables,
+        selectedLayers.map((l) => l.value ?? 0)
+      ),
+    [tables, selectedLayers]
   );
   const pageItems = tableItems[activePage];
 
@@ -165,7 +169,7 @@ const TooltipTable = ({
               aria-label="Compressed pagination"
               pageCount={tableItems.length}
               activePage={activePage}
-              onPageClick={onSelectPage}
+              onPageClick={setActivePage}
               compressed
             />
           ) : (