Track previous value

tsx

function usePrevious<T>(value: T) {
  const ref = useRef<T | undefined>(undefined);
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

Explanation

Useful for comparisons, transitions, analytics, and animation decisions.

View in sheet →

Learn the surrounding workflow

Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.

Compare commands View fixes

Related commands

Same sheet · prioritizing Common UI Hooks

Persist state to localStorage

Sync component state with localStorage.

Open In sheettsxsame section

Respond to media queries

Expose a boolean that tracks a CSS media query.

Open In sheettsxsame section

Handle clicks outside an element

Close menus or popovers when a click happens outside a ref.

Open In sheettsxsame section

Basic custom hook

Extract reusable stateful logic into a function.

Open In sheettsx3 tag match

Custom hook with options object

Prefer options objects for extensible APIs.

Open In sheettsx3 tag match

Return object from a custom hook

Use named returns for richer APIs.

Open In sheettsx3 tag match