add debounce for user input optimization

src/components/autoCompleteState.tsx

@@ -1,17 +1,19 @@
 import { useEffect, useRef, useState } from "react";
 import ResponseData from "../utils/type";
 import { FileteredData } from "../utils/api";
+import { useDebounce } from "../utils/helpers";
 
 const AutoCompleteState = () => {
   const [searchText, setSearchText] = useState<string>("");
   const [suggestions, setSuggestions] = useState<ResponseData[]>([]);
   const [showSuggestions, setShowSuggestions] = useState<boolean>(false);
   const [selectedSuggestion, setSelectedSuggestion] = useState<number>(-1);
   const inputRef = useRef<HTMLInputElement>(null);
+  const debouncedInputValue = useDebounce(searchText, 300)
 
   useEffect(() => {
     (async () => {
-      const filteredData = await FileteredData(searchText);
+      const filteredData = await FileteredData(debouncedInputValue);
       if (filteredData) {
         setSuggestions(filteredData);
       }
@@ -35,7 +37,7 @@ const AutoCompleteState = () => {
     return () => {
       document.removeEventListener("click", handleFocusOut);
     };
-  }, [searchText]);
+  }, [debouncedInputValue]);
 
   return {
     searchText,

src/utils/helpers.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 
 export function highlightMatch( suggestion: string, inputValue : string) {
   const index = suggestion.toLocaleLowerCase().indexOf(inputValue.toLocaleLowerCase());
@@ -14,4 +15,20 @@ export function highlightMatch( suggestion: string, inputValue : string) {
       {afterMatch}
     </>
   );
+}
+
+export function useDebounce(inputValue: string, delay: number) {
+  const [debouncedValue, setDebouncedValue] = useState(inputValue);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(inputValue);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [inputValue, delay]);
+
+  return debouncedValue;
 }