Add debounce hook (#3524)

* Remove noop
* Add debounce hook

ui/v2.5/src/components/List/ListFilter.tsx

@@ -1,10 +1,8 @@
-import debounce from "lodash-es/debounce";
 import cloneDeep from "lodash-es/cloneDeep";
 import React, {
   HTMLAttributes,
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from "react";
@@ -40,6 +38,7 @@ import {
   faRandom,
   faTimes,
 } from "@fortawesome/free-solid-svg-icons";
+import { useDebounce } from "src/hooks/debounce";
 
 const maxPageSize = 1000;
 interface IListFilterProps {
@@ -79,13 +78,15 @@ export const ListFilter: React.FC<IListFilterProps> = ({
     [filter, onFilterUpdate]
   );
 
-  // useMemo to prevent debounce from being recreated on every render
-  const debouncedSearchQueryUpdated = useMemo(
-    () =>
-      debounce((value: string) => {
-        searchQueryUpdated(value);
-      }, 500),
-    [searchQueryUpdated]
+  const searchCallback = useDebounce(
+    (value: string) => {
+      const newFilter = cloneDeep(filter);
+      newFilter.searchTerm = value;
+      newFilter.currentPage = 1;
+      onFilterUpdate(newFilter);
+    },
+    [filter, onFilterUpdate],
+    500
   );
 
   const intl = useIntl();
@@ -145,7 +146,7 @@ export const ListFilter: React.FC<IListFilterProps> = ({
   }
 
   function onChangeQuery(event: React.FormEvent<HTMLInputElement>) {
-    debouncedSearchQueryUpdated(event.currentTarget.value);
+    searchCallback(event.currentTarget.value);
     setQueryClearShowing(!!event.currentTarget.value);
   }