From 4f2ab25f16d115ca08f45b5c2c8eb2f246b1e5f3 Mon Sep 17 00:00:00 2001
From: Jakub Knetl <knetl.j@gmail.com>
Date: Wed, 3 Jan 2024 08:46:41 +0100
Subject: [PATCH] Chapter 11 - Implement debouncing

---
 app/ui/search.tsx |  7 +++++--
 package-lock.json | 12 ++++++++++++
 package.json      |  1 +
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/ui/search.tsx b/app/ui/search.tsx
index 757722e..4611f54 100644
--- a/app/ui/search.tsx
+++ b/app/ui/search.tsx
@@ -2,12 +2,15 @@
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import {usePathname, useRouter, useSearchParams} from "next/navigation";
+import { useDebouncedCallback } from 'use-debounce';
 
 export default function Search({ placeholder }: { placeholder: string }) {
     const searchParams = useSearchParams();
     const pathname = usePathname();
     const { replace } = useRouter();
-    function handleSearch(term: string) {
+
+    const handleSearch = useDebouncedCallback((term) => {
+        console.log(`Searching... ${term}`);
         const params = new URLSearchParams(searchParams);
         if (term) {
             params.set('query', term);
@@ -16,7 +19,7 @@ export default function Search({ placeholder }: { placeholder: string }) {
         }
 
         replace(`${pathname}?${params.toString()}`);
-    }
+    }, 300)
   return (
     <div className="relative flex flex-1 flex-shrink-0">
       <label htmlFor="search" className="sr-only">
diff --git a/package-lock.json b/package-lock.json
index fcb753e..5603e66 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "react-dom": "18.2.0",
         "tailwindcss": "3.3.3",
         "typescript": "5.2.2",
+        "use-debounce": "^10.0.0",
         "zod": "^3.22.2"
       },
       "devDependencies": {
@@ -7100,6 +7101,17 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-debounce": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.0.tgz",
+      "integrity": "sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==",
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/utf-8-validate": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-6.0.3.tgz",
diff --git a/package.json b/package.json
index 0cfa589..58d936d 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2",
+    "use-debounce": "^10.0.0",
     "zod": "^3.22.2"
   },
   "devDependencies": {