HomeAboutCodes

IntroductionCSS FlexboxCSS Grid Layout

AccordionAspect RatioBadgeBreadcrumbButtonCarouselCheckboxDate PickerDialogDrawerFormHover CardPaginationPopoverSheetSkeletonSonnerSwitchTableTooltip

Background FireworksBackground HexagonBackground HoleBackground StartElement SpringLoadingProgress ScrollText HighlightText RollingText ShimmeringText SplittingText Typing

Sortable

useClickOutsideuseCopyToClipboarduseDebounceuseFetchuseIsClientuseLocalStorageuseMediaQueryusePrevioususeToggleuseUnmount

Import

1import useDebounce from "@repo/ui/hooks/use-debounce";

Usage

1const [searchTerm, setSearchTerm] = useState('');
2const debouncedSearch = useDebounce(searchTerm, 500);
3
4useEffect(() => {
5  if (debouncedSearch) {
6    console.log(debouncedSearch);
7  }
8}, [debouncedSearch]);

Original

1import { useState, useEffect } from "react";
2
3function useDebounce<T>(value: T, delay: number): T {
4  const [debouncedValue, setDebouncedValue] = useState(value);
5
6  useEffect(() => {
7    const handler = setTimeout(() => setDebouncedValue(value), delay);
8
9    return () => clearTimeout(handler);
10  }, [value, delay]);
11
12  return debouncedValue;
13}
14
15export default useDebounce;
useCopyToClipboarduseFetch