پیاده سازی جستجو در سایت به بهینه‌ترین شکل ممکن با Debouncing در react

اگه شماهم مثل من از عملیات سرچ در پروژه هاتون زیاد استفاده میکنید، حتما متوجه شدید که با تایپ کردن هر حرف در اینپوت، یکبار api رو صدامیزنید و این اصلا بهینه نیست. توی این مقاله با یک مثال ساده، این مشکل رو حل میکنیم.

خب مسئله مشخص شد؛ اما راه حل چیه؟ همونطور که از عنوان مقاله مشخصه، راه حل Debouncing هست.

اما debouncing چه کاری انجام میده؟ debouncing درواقع زمان اجرا شدن یک فانکشن رو به تاخیر میندازه و اینکاررو با استفاده از setTimeOut و Closures انجام میده.

کد زیر رو در نظر بگیرید که یک جست و جو رو بصورت ساده انجام میده:

function App() {
  let [data, setData] = useState([]);
  const myOnChange = async (e) => {  
  let queryString = e.target.value;  
  let data = await makeAPICall(queryString);  
  setData(data);
}
return <><input type=&quottext&quot ={myOnChange}></input></>
}

حالا خیلی ساده با اضافه کردن setTimeOut میتونیم یک فاصله زمانی به تایپ کردن کاربر و صدازده شدن api اضافه کنیم:

function debouncer() {
 let timeout = null;
 return function debounced() {
   const onComplete = () => {
     timeout = null;
   }   if (timeout) {
     clearTimeout(timeout);
   }   timeout = setTimeout(onComplete, 3000);
 };
}
function App() {  
let [data, setData] = useState([]); 
 const myOnChange = async (e) => {
    let queryString = e.target.value;
    let data = await makeAPICall(queryString);
    setData(data);
  }  const debouncedOnChange = debouncer(myOnChange, 1000);
  return <><input type=&quottext&quot ={debouncedOnChange}></input>    </>
}

امیدوارم لذت برده باشید.