فرض کنیم یک پایگاه داده با داده های زیاد داریم و کاربر می خواهد روی آن ها سرچ بزند. چند راه مختلف برای این کار وجود دارد:

• یکی از راههای پیاده سازی سرچ این است که کل داده ها را از back-end بگیریم و بعد بنا به کاراکترهایی که کاربر در input وارد می کند، داده موردنظر را نشانش بدهیم. این روش صد در صد بدترین نوع پیاده سازی سرچ است. چون اگر داده ها زیاد باشد، حافظه را پر خواهد کرد. و لزومی هم به داشتن داده های غیرمرتبط با سرچ نیست.
• راه دیگر این است که به ازای هر کاراکتری که کاربر وارد می کند، یک درخواست به back-end بدهیم تا تنها داده هایی که آن کاراکتر را دارند به ما برگرداند. این روش هم بهینه نیست. چون اگر قرار باشد به ازای هر کاراکتری که کاربر وارد می کند یک درخواست به دیتابیس بدهیم ، بار زیادی را روی سرور می اندازیم و قطعا برنامه کند می شود.
• بهینه ترین راهی که بیشتر شبکه های اجتماعی هم از آن استفاده می کنند این است که یک مدت زمان خاصی بعد از تمام شدن تایپ کاربر صبر کنیم و بعد محتوایی که تا به اینجا تایپ کرده را در درخواستمان به back-end بدهیم تا با آن سرچ کند.

حالا چطور روش سوم را در react پیاده سازی کنیم؟

اول یک متغیر برای نگهداری محتوایی که کاربر برای سرچ وارد می کند (searchValue) می سازیم:

const [searchValue,setSearchValue] = useState("");

حالا تگ input که کاربر داخل آن سرچ می کند را تعریف می کنیم (من از prime react InputText استفاده کردم):

import { InputText } from "primereact/inputtext"; 

.
.
.
<InputText
              className="search-box"
              placeholder="اینجا جستجو کنید ..."
              value={searchValue}
              onChange={handleSearch}
            />

تابع handleSearch ، محتوای وارد شده را داخل searchValue قرار می دهد، اما دستور سرچ را نمی دهد:

const handleSearch = (event) => {
    const { value } = event.target;
    
    setSearchValue(value);
  
  };

حالا یک useEffect تعریف می کنیم که با مقداری تاخیر (در اینجا 500 میلی ثانیه) ، دستور سرچ با searchValue را می دهد.

// Create a debounced version of the API request
  useEffect(() => {
    
    const delayedApiRequest = setTimeout(() => {
      if (searchValue) {
        fetchPosts(searchValue);
      }
    }, 500);

*در اینصورت موقعی که کاربر در حال تایپ کردن است ما سرچی انجام نمی دهیم و تنها بعد از اینکه 500 میلی ثانیه از تمام شدن تایپش گذشت این کار را انجام می دهیم.

*تابع fetchPosts(searchValue ، کار fetch کردن داده ها را برای سرچ انجام می دهد. اگر از mongo برای دیتابیس استفاده می کنید، می توانید این لینک را برای پیاده سازی سرچ ببینید.