Optimize memoization and search debouncing on /targets page (#16589)

Moving the debouncing of the search field to the parent component and then
memoizing the ScrapePoolsList component prevents a lot of superfluous
re-renders of the entire scrape pools list that previously got triggered
immediately when you typed in the search box or even just collapsed a pool.
(While the computation of what data to show was already memoized in the
ScrapePoolList component, the component itself still had to re-render a lot
with the same data.)

Discovered this problem + verified fix using react-scan.

Signed-off-by: Julius Volz <julius.volz@gmail.com>

web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx

@@ -19,7 +19,7 @@ import {
 } from "@tabler/icons-react";
 import { useSuspenseAPIQuery } from "../../api/api";
 import { Target, TargetsResult } from "../../api/responseTypes/targets";
-import React, { FC, useMemo } from "react";
+import React, { FC, memo, useMemo } from "react";
 import {
   humanizeDurationRelative,
   humanizeDuration,
@@ -37,7 +37,6 @@ import CustomInfiniteScroll from "../../components/CustomInfiniteScroll";
 import badgeClasses from "../../Badge.module.css";
 import panelClasses from "../../Panel.module.css";
 import TargetLabels from "./TargetLabels";
-import { useDebouncedValue } from "@mantine/hooks";
 import { targetPoolDisplayLimit } from "./TargetsPage";
 import { badgeIconStyle } from "../../styles";
 
@@ -145,12 +144,8 @@ type ScrapePoolListProp = {
   searchFilter: string;
 };
 
-const ScrapePoolList: FC<ScrapePoolListProp> = ({
-  poolNames,
-  selectedPool,
-  healthFilter,
-  searchFilter,
-}) => {
+const ScrapePoolList: FC<ScrapePoolListProp> = memo(
+  ({ poolNames, selectedPool, healthFilter, searchFilter }) => {
     // Based on the selected pool (if any), load the list of targets.
     const {
       data: {
@@ -174,17 +169,15 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
       (state) => state.targetsPage
     );
 
-  const [debouncedSearch] = useDebouncedValue<string>(searchFilter.trim(), 250);
-
     const allPools = useMemo(
       () =>
         buildPoolsData(
           selectedPool ? [selectedPool] : poolNames,
           activeTargets,
-        debouncedSearch,
+          searchFilter,
           healthFilter
         ),
-    [selectedPool, poolNames, activeTargets, debouncedSearch, healthFilter]
+      [selectedPool, poolNames, activeTargets, searchFilter, healthFilter]
     );
 
     const allPoolNames = Object.keys(allPools);
@@ -205,8 +198,8 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
               title="Hiding pools with no matching targets"
               icon={<IconInfoCircle />}
             >
-            Hiding {allPoolNames.length - shownPoolNames.length} empty pools due
-            to filters or no targets.
+              Hiding {allPoolNames.length - shownPoolNames.length} empty pools
+              due to filters or no targets.
               <Anchor ml="md" fz="1em" onClick={() => setShowEmptyPools(true)}>
                 Show empty pools
               </Anchor>
@@ -287,9 +280,12 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
                       </Anchor>
                     </Alert>
                   ) : pool.targets.length === 0 ? (
-                  <Alert title="No matching targets" icon={<IconInfoCircle />}>
-                    No targets in this pool match your filter criteria (omitted{" "}
-                    {pool.count} filtered targets).
+                    <Alert
+                      title="No matching targets"
+                      icon={<IconInfoCircle />}
+                    >
+                      No targets in this pool match your filter criteria
+                      (omitted {pool.count} filtered targets).
                       <Anchor
                         ml="md"
                         fz="1em"
@@ -348,7 +344,9 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
                                             label: { textTransform: "none" },
                                           }}
                                           leftSection={
-                                          <IconRefresh style={badgeIconStyle} />
+                                            <IconRefresh
+                                              style={badgeIconStyle}
+                                            />
                                           }
                                         >
                                           {humanizeDurationRelative(
@@ -383,7 +381,9 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
                                   </Table.Td>
                                   <Table.Td valign="top">
                                     <Badge
-                                    className={healthBadgeClass(target.health)}
+                                      className={healthBadgeClass(
+                                        target.health
+                                      )}
                                     >
                                       {target.health}
                                     </Badge>
@@ -417,6 +417,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
         </Accordion>
       </Stack>
     );
-};
+  }
+);
 
 export default ScrapePoolList;

web/ui/mantine-ui/src/pages/targets/TargetsPage.tsx

@@ -30,9 +30,16 @@ import ScrapePoolList from "./ScrapePoolsList";
 import { useSuspenseAPIQuery } from "../../api/api";
 import { ScrapePoolsResult } from "../../api/responseTypes/scrapePools";
 import { expandIconStyle, inputIconStyle } from "../../styles";
+import { useDebouncedValue } from "@mantine/hooks";
 
 export const targetPoolDisplayLimit = 20;
 
+// Should be defined as a constant here instead of inline as a value
+// to avoid unnecessary re-renders. Otherwise the empty array has
+// a different reference on each render and causes subsequent memoized
+// computations to re-run as long as no state filter is selected.
+const emptyHealthFilter: string[] = [];
+
 export default function TargetsPage() {
   // Load the list of all available scrape pools.
   const {
@@ -48,12 +55,13 @@ export default function TargetsPage() {
   const [scrapePool, setScrapePool] = useQueryParam("pool", StringParam);
   const [healthFilter, setHealthFilter] = useQueryParam(
     "health",
-    withDefault(ArrayParam, [])
+    withDefault(ArrayParam, emptyHealthFilter)
   );
   const [searchFilter, setSearchFilter] = useQueryParam(
     "search",
     withDefault(StringParam, "")
   );
+  const [debouncedSearch] = useDebouncedValue<string>(searchFilter.trim(), 250);
 
   const { collapsedPools, showLimitAlert } = useAppSelector(
     (state) => state.targetsPage
@@ -147,7 +155,7 @@ export default function TargetsPage() {
             poolNames={scrapePools}
             selectedPool={(limited && scrapePools[0]) || scrapePool || null}
             healthFilter={healthFilter as string[]}
-            searchFilter={searchFilter}
+            searchFilter={debouncedSearch}
           />
         </Suspense>
       </ErrorBoundary>