Chapter 11 - Implement debouncing

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">

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",

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": {