From fe0c5615a66156b861b0810259afe7edfe501e7b Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Wed, 28 Apr 2021 09:12:35 +1000
Subject: [PATCH] Memo-ise list hook functions (#1329)

---
 ui/v2.5/src/hooks/ListHook.tsx | 52 +++++++++++++++++++++-------------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/ui/v2.5/src/hooks/ListHook.tsx b/ui/v2.5/src/hooks/ListHook.tsx
index 5aec643ff..c2891c4ff 100644
--- a/ui/v2.5/src/hooks/ListHook.tsx
+++ b/ui/v2.5/src/hooks/ListHook.tsx
@@ -1,6 +1,12 @@
 import _ from "lodash";
 import queryString from "query-string";
-import React, { useCallback, useRef, useState, useEffect } from "react";
+import React, {
+  useCallback,
+  useRef,
+  useState,
+  useEffect,
+  useMemo,
+} from "react";
 import { ApolloError } from "@apollo/client";
 import { useHistory, useLocation } from "react-router-dom";
 import Mousetrap from "mousetrap";
@@ -525,26 +531,34 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
     options.persistState,
   ]);
 
-  function updateQueryParams(listFilter: ListFilterModel) {
-    setFilter(listFilter);
-    const newLocation = { ...location };
-    newLocation.search = listFilter.makeQueryParameters();
-    history.replace(newLocation);
-    if (options.persistState) {
-      updateInterfaceConfig(listFilter, options.persistState);
-    }
-  }
+  const updateQueryParams = useCallback(
+    (listFilter: ListFilterModel) => {
+      setFilter(listFilter);
+      const newLocation = { ...location };
+      newLocation.search = listFilter.makeQueryParameters();
+      history.replace(newLocation);
+      if (options.persistState) {
+        updateInterfaceConfig(listFilter, options.persistState);
+      }
+    },
+    [setFilter, history, location, options.persistState, updateInterfaceConfig]
+  );
 
-  const onChangePage = (page: number) => {
-    const newFilter = _.cloneDeep(filter);
-    newFilter.currentPage = page;
-    updateQueryParams(newFilter);
-    window.scrollTo(0, 0);
-  };
+  const onChangePage = useCallback(
+    (page: number) => {
+      const newFilter = _.cloneDeep(filter);
+      newFilter.currentPage = page;
+      updateQueryParams(newFilter);
+      window.scrollTo(0, 0);
+    },
+    [filter, updateQueryParams]
+  );
 
-  const renderFilter = !options.filterHook
-    ? filter
-    : options.filterHook(_.cloneDeep(filter));
+  const renderFilter = useMemo(() => {
+    return !options.filterHook
+      ? filter
+      : options.filterHook(_.cloneDeep(filter));
+  }, [filter, options]);
 
   const { contentTemplate, onSelectChange } = RenderList({
     ...options,