useDebounce

Frend Front provides two hooks for debouncing:

useDebouncedCallback

Usage

import { useDebouncedCallback } from "@frend-digital/ui/hooks";

const Component = () => {
  // search will only fire after 200ms of no input
  const search = useDebouncedCallback(async (value: string) => {
    await api.search(value);
  }, 200);

  return <input onChange={(e) => search(e.target.value)} />;
};

useDebouncedValue

Usage

import { useDebouncedValue } from "@frend-digital/ui/hooks";

const Component = () => {
    const [value, setValue] = useState("");
    const debouncedValue = useDebouncedValue(value, 200);

    // Data will only refetch after 200ms of no input
    const {data} = useQuery({
        queryKey: ["search", debouncedValue],
        queryFn: async () => {
            return await api.search(debouncedValue);
        },
    })

    return <input value={value} onChange={(e) => setValue(e.target.value)} />;