How To Use Usedebounce For Search Function In React

I am trying to use useDebounce when user search a user in search function. How can I add useDebounce in this situation? import { useDebounce } from 'use-debounce'; const [searchQue

Solution 1:

I think you can handle that by simply debouncing the value. So something like

const [searchQuery, setSearchQuery] = useState("");
const debouncedSearchQuery = useDebounce(searchQuery, 500)

useEffect(() => {
    if (debouncedSearchQuery === "") {
      setInvitees([]);
    }

    if ((debouncedSearchQuery || "").length >= 2) {
      getUserToInvite();
    }
  }, [debouncedSearchQuery]);

If you are looking to debounce the callback, that is a little different. But the use-debounce docs do a great way of explaining it! https://github.com/xnimorz/use-debounce#debounced-callbacks