chore: debounce search text input (#943)

* chore: debounce search text input

* chore: update

web/package.json

@@ -32,8 +32,8 @@
     "@types/lodash-es": "^4.17.5",
     "@types/node": "^18.0.3",
     "@types/qs": "^6.9.7",
-    "@types/react": "^18.0.21",
+    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.6",
+    "@types/react-dom": "^18.0.10",
     "@types/semver": "^7.3.13",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",

web/src/components/SearchBar.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import useDebounce from "../hooks/useDebounce";
 import { useLocationStore, useDialogStore } from "../store/module";
 import { memoSpecialTypes } from "../helpers/filter";
 import Icon from "./Icon";
@@ -11,8 +12,8 @@ const SearchBar = () => {
   const dialogStore = useDialogStore();
   const memoType = locationStore.state.query.type;
   const [queryText, setQueryText] = useState("");
-  const inputRef = useRef<HTMLInputElement>(null);
   const [isFocus, setIsFocus] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -40,6 +41,14 @@ const SearchBar = () => {
     setQueryText(text === undefined ? "" : text);
   }, [locationStore.state.query.text]);
 
+  useDebounce(
+    () => {
+      locationStore.setTextQuery(queryText.length === 0 ? undefined : queryText);
+    },
+    200,
+    [queryText]
+  );
+
   const handleMemoTypeItemClick = (type: MemoSpecType | undefined) => {
     const { type: prevType } = locationStore.getState().query ?? {};
     if (type === prevType) {
@@ -51,7 +60,6 @@ const SearchBar = () => {
   const handleTextQueryInput = (event: React.FormEvent<HTMLInputElement>) => {
     const text = event.currentTarget.value;
     setQueryText(text);
-    locationStore.setTextQuery(text.length === 0 ? undefined : text);
   };
 
   const handleFocus = () => {

web/src/hooks/useDebounce.ts

@@ -0,0 +1,12 @@
+import { DependencyList, useEffect } from "react";
+import useTimeoutFn from "./useTimeoutFn";
+
+export type UseDebounceReturn = [() => boolean | null, () => void];
+
+export default function useDebounce(fn: () => any, ms = 0, deps: DependencyList = []): UseDebounceReturn {
+  const [isReady, cancel, reset] = useTimeoutFn(fn, ms);
+
+  useEffect(reset, deps);
+
+  return [isReady, cancel];
+}

web/src/hooks/useTimeoutFn.ts

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useRef } from "react";
+
+export type UseTimeoutFnReturn = [() => boolean | null, () => void, () => void];
+
+export default function useTimeoutFn(fn: () => any, ms = 0): UseTimeoutFnReturn {
+  const ready = useRef<boolean | null>(false);
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
+  const callback = useRef(fn);
+
+  const isReady = useCallback(() => ready.current, []);
+
+  const set = useCallback(() => {
+    ready.current = false;
+    timeout.current && clearTimeout(timeout.current);
+
+    timeout.current = setTimeout(() => {
+      ready.current = true;
+      callback.current();
+    }, ms);
+  }, [ms]);
+
+  const clear = useCallback(() => {
+    ready.current = null;
+    timeout.current && clearTimeout(timeout.current);
+  }, []);
+
+  // update ref when function changes
+  useEffect(() => {
+    callback.current = fn;
+  }, [fn]);
+
+  // set on mount, clear on unmount
+  useEffect(() => {
+    set();
+
+    return clear;
+  }, [ms]);
+
+  return [isReady, clear, set];
+}