usePrevious

Learn the usePrevious custom hook.

What is usePrevious?

usePrevious is a custom hook that keeps the value from the previous render. It is built with one useRef and one useEffect. It returns the previous value to the calling component on each render.

Common use: show whether a number grew or shrank, or compare old and new values. You write const prev = usePrevious(count); on the first render prev is undefined, on the second render you get the previous count. This hook is handy on dashboards.

How usePrevious works

usePrevious is built from two pieces. A useRef holds the previous value; a useEffect updates that ref after render. Inside the effect you assign ref.current = value; but since the effect runs after render, this assignment is visible on the next render.

So the hook first returns ref.current (the old value), then the effect runs and updates the ref to the new value. This order gives you the value from the previous render. Since ref.current does not trigger a re-render, no infinite loop occurs.

Exercise Write usePrevious

Write the usePrevious custom hook. Create ref with useRef (initial value undefined). Inside useEffect assign ref.current = value; the dependency array is [value]. The hook returns ref.current.

Show example solution

import { useEffect, useRef } from "react";

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

Test yourself

What does usePrevious return on the first render?
```
const prev = usePrevious(count);
```
- The current value
- undefined
- Throws an error
- Zero
Show answer

undefined — On the first render there is no previous value.

Write the useEffect dependency

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

Show answer

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

Match the concept to its role

useRef

Holds old value
useEffect

Updates the ref
ref.current

Returned value
undefined

First-render value

Next lesson: Hook composition

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies