Back to all snippets
Library/React/usePrevious Hook
typescriptbeginnerhooksstateutilities

How to implement usePrevious Hook in Typescript

Get the previous value of a state or prop

Quick Answer

usePrevious stores the value from the last render in a ref. Because refs do not trigger re-renders and effects run after painting, ref.current always holds the previous render's value during the current render.

Code Snippet

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

What is usePrevious Hook?

usePrevious stores the value from the last render using a ref. Because updating a ref does not trigger a re-render, and the effect runs after the render, ref.current always holds the value from the previous render cycle when the component reads it during the current render.

How It Works

  1. 1A useRef is initialised with undefined.
  2. 2During each render, the component reads ref.current which still holds the previous value.
  3. 3After the render, useEffect updates ref.current to the current value.
  4. 4On the next render, ref.current is the value from the previous render.

Common Use Cases

  • Animations - Animate between previous and current values
  • Change detection - Show a diff or highlight changed fields
  • Undo functionality - Keep track of the last state for reverting
  • Comparison - Log or display what a value was before an update

Key Benefits

  • Zero extra renders — refs do not trigger re-renders
  • Works with any value type including objects and arrays
  • Idiomatic React pattern recommended in the official docs
  • Tiny implementation with no dependencies

Common Mistakes to Avoid

  • Trying to detect changes in the same render — usePrevious is one render behind by design.
  • Using state instead of a ref — state would cause an extra re-render on every update.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more typescript examples

Frequently Asked Questions

Why does usePrevious use a ref instead of state?

Updating a ref does not trigger a re-render. If you used setState to store the previous value, every value change would cause two renders.

What is the value on the first render?

undefined, because the ref has not been set by the first useEffect yet.

Related Snippets

typescript
intermediate
useLocalStorage Hook
React hook for managing state synchronized with localStorage
hooksstoragestate
typescript
intermediate
useDebounce Hook
React hook to debounce any value
hooksperformanceoptimization
typescript
intermediate
useMediaQuery Hook
React hook for responsive design with CSS media queries
hooksresponsiveui

About This Typescript Code Snippet

This free typescript code snippet for useprevious hook is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this beginner-level example will help you implement useprevious hook quickly and correctly.

All snippets in the Snippetly library follow typescript best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses typescript.

Tags: hooks, state, utilities  | Language: typescript  | Difficulty: beginner  | Category: React

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets