fix: Adding debounce for autocomplete-suggestions example (vercel#2017)

Walkeryr · web-flow · commit 1e6ccc028059 · 2022-06-07T23:24:30.000+02:00
fix: add debounce for autocomplete change handler
diff --git a/examples/autocomplete-suggestions/package.json b/examples/autocomplete-suggestions/package.json
@@ -5,6 +5,7 @@
   "license": "MIT",
   "dependencies": {
     "@reach/combobox": "0.16.1",
+    "lodash.debounce": "4.0.8",
     "next": "latest",
     "react": "18.1.0",
     "react-dom": "18.1.0",
diff --git a/examples/autocomplete-suggestions/pages/index.js b/examples/autocomplete-suggestions/pages/index.js
@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useMemo, useState } from "react"
 import fetcher from '../libs/fetcher'
 import {
   Combobox,
@@ -7,6 +7,7 @@ import {
   ComboboxList,
   ComboboxOption
 } from '@reach/combobox'
+import debounce from 'lodash.debounce'
 
 import useSWR from 'swr'
 
@@ -17,17 +18,21 @@ export default function Index() {
     fetcher
   )
 
-  function handleSearchTermChange(event) {
+  function handleChange(event) {
     setSearchTerm(event.target.value)
   }
 
+  const debouncedHandleChange = useMemo(
+    () => debounce(handleChange, 500)
+  , []);
+
   return (
     <div style={{ textAlign: 'center' }}>
       <h1>Country Search</h1>
       <Combobox>
         <ComboboxInput
           className="country-search-input"
-          onChange={handleSearchTermChange}
+          onChange={debouncedHandleChange}
           aria-label="Countries"
         />
         {countries && countries.length > 0 && (
