react-native-debounce-search
v1.0.2
Published
This package is for implementing smooth search funcanility in react native app with debouncing
Downloads
10
Maintainers
Readme
react-native-debounce-search
Debouncing in search optimizes the search experience by delaying search requests until the user pauses typing. It reduces unnecessary network requests, improves performance, and provides a smoother user experience by minimizing server load and enhancing responsiveness.
Installation
npm install react-native-debounce-search
Usage
import useDebounce from "react-native-debounce-search";
// ...
const [search, setSearch] = useState("");
const handleDebounce = () => {
//. add your search function here
};
useEffect(() => {
// ...
useDebounce.add(handleDebounce, delay);
// add your delay time according to your usecase.
return () => {
// ...
useDebounce.remove();
};
}, [search]);
How it works
It is a class that has two functions add and remove. Add function will take your search function as an argument and delay time that you want to wait your function to wait till next itration. After that wait time your function will run. If your changed your search element withen that time, the listner will be removed and your time will start again and it will wait again till delay time for next change if change will not happen than it will run your search function.