</>
typescriptbeginner

usePrevious Hook

Track the previous value of any state or prop using a ref-based hook for comparison logic.

typescript
import { useEffect, useRef } from 'react';

export function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T | undefined>(undefined);

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
}

// Usage:
// const [count, setCount] = useState(0);
// const prevCount = usePrevious(count);
// console.log(`Changed from ${prevCount} to ${count}`);

Use Cases

  • Detecting value changes
  • Animation transitions
  • Undo functionality

Tags

#hooks#state#previous-value#react

Related Snippets

Similar patterns you can reuse in the same workflow.

typescriptintermediate

useLocalStorage — Persistent State Hook

Sync React state with localStorage including SSR safety, JSON serialization, and cross-tab updates.

#hooks#localstorage
typescriptintermediate

useFormValidation Hook

Lightweight form validation hook with field-level errors, touched tracking, and submit handling.

#hooks#forms
typescriptintermediate

useFetch — Generic Data Fetching Hook

Custom React hook for data fetching with loading, error, and refetch states using the Fetch API.

#hooks#fetch
typescriptbeginner

useDebounce — Debounced Value Hook

Debounce any rapidly-changing value with a configurable delay. Useful for search inputs and resize handlers.

#hooks#debounce