Refactor SearchAll screen (#308)

src/components/manga/hooks.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { mutate } from 'swr';
 import requestManager from 'lib/RequestManager';
 
@@ -34,3 +34,19 @@ export const useRefreshManga = (mangaId: string) => {
 
     return [handleRefresh, { loading: fetchingOnline }] as const;
 };
+
+export const useDebounce = <Value>(value: Value, delay: number): Value => {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+
+    return debouncedValue;
+};