Memo-ise list hook functions (#1329)

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,7 +531,8 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
     options.persistState,
   ]);
 
-  function updateQueryParams(listFilter: ListFilterModel) {
+  const updateQueryParams = useCallback(
+    (listFilter: ListFilterModel) => {
       setFilter(listFilter);
       const newLocation = { ...location };
       newLocation.search = listFilter.makeQueryParameters();
@@ -533,18 +540,25 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
       if (options.persistState) {
         updateInterfaceConfig(listFilter, options.persistState);
       }
-  }
+    },
+    [setFilter, history, location, options.persistState, updateInterfaceConfig]
+  );
 
-  const onChangePage = (page: number) => {
+  const onChangePage = useCallback(
+    (page: number) => {
       const newFilter = _.cloneDeep(filter);
       newFilter.currentPage = page;
       updateQueryParams(newFilter);
       window.scrollTo(0, 0);
-  };
+    },
+    [filter, updateQueryParams]
+  );
 
-  const renderFilter = !options.filterHook
+  const renderFilter = useMemo(() => {
+    return !options.filterHook
       ? filter
       : options.filterHook(_.cloneDeep(filter));
+  }, [filter, options]);
 
   const { contentTemplate, onSelectChange } = RenderList({
     ...options,