https://github.com/salman-ahamed/debounce

Searching with debounce is a technique used to optimize search functionality in web applications. It helps reduce the number of search requests made to the server by delaying the execution of the search function until a certain amount of time has passed since the user stopped typing.
https://github.com/salman-ahamed/debounce

javascript js ractjs react search-with-debounce ts typescript

Last synced: about 1 month ago
JSON representation

Searching with debounce is a technique used to optimize search functionality in web applications. It helps reduce the number of search requests made to the server by delaying the execution of the search function until a certain amount of time has passed since the user stopped typing.

• Host: GitHub
• URL: https://github.com/salman-ahamed/debounce
• Owner: Salman-Ahamed
• Created: 2022-09-05T03:48:40.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-08-28T07:04:57.000Z (almost 3 years ago)
• Last Synced: 2025-06-28T09:08:46.205Z (12 months ago)
• Topics: javascript, js, ractjs, react, search-with-debounce, ts, typescript
• Language: TypeScript
• Homepage:
• Size: 7.81 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Search with Debounce


### Functionality

```ts

const filterBySearch = (value: string) => {

  console.log(value);

};

const debounce = (fn: (value: string) => void, delay: number) => {

  let timeoutId: NodeJS.Timeout | number | undefined;

  return (e: FormEvent) => {

    if (timeoutId) {

      clearTimeout(timeoutId);

    }

    timeoutId = setTimeout(() => {

      fn((e.target as HTMLInputElement).value);

    }, delay);

  };

};

```

### Input Section

```tsx

 filterBySearch(value), 500)}

/>

```