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 usePrevious from "@repo/ui/hooks/use-previous";

Usage

1const [count, setCount] = useState(0);
2const prevCount = usePrevious(count);
3
4return (
5  <p>
6    Now: {count}, Before: {prevCount}
7  </p>
8);

Original

1import { useEffect, useRef } from "react";
2
3function usePrevious<T>(value: T): T | undefined {
4  const ref = useRef<T | undefined>(undefined);
5
6  useEffect(() => {
7    ref.current = value;
8  }, [value]);
9
10  return ref.current;
11}
12
13export default usePrevious;
useMediaQueryuseToggle