usePrevious

Write a usePrevious hook that stores the previous value.

usePrevious

usePrevious remembers the value from the previous render. React state holds only the current value; the previous one isn't directly accessible.

The fix: hold a memory with useRef, update it after each render with useEffect. const ref = useRef(value); useEffect(() => { ref.current = value; }); return ref.current;

Tip: useEffect's dependency array should be [value]. So ref is updated only when value changes. This hook is also useful in animations to compare old/new values.

useEffect order

useEffect runs after the render is painted. So the assignment ref.current = value happens after the component is drawn. That's why the returned ref.current is still the old value; the new one appears in the next render.

That's why the hook is named "usePrevious". It reads the previous value during render, then prepares for the next render after.

This ordering can be confusing at first but it's central to React's render model. Side effects always run after paint.

Exercise Write usePrevious

Complete the skeleton. Write a usePrevious(value) hook. Create ref with useRef(value). Inside useEffect, assign ref.current = value; the dependency array is [value]. Return ref.current. Export the hook.

Show example solution

import { useRef, useEffect } from "react";

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

export default usePrevious;

Test yourself

Which hooks does usePrevious use?
- useMemo and useCallback
- useState and useContext
- useReducer and useRef
- useRef and useEffect
Show answer

useRef and useEffect — usePrevious uses useRef and useEffect.

Access

The previous value is accessed via ____.

Show answer

The previous value is accessed via ref.current.

Match the usePrevious steps

useRef(value)

Initial
useEffect

Side effect
ref.current = value

Update
return ref.current

Old value

Next lesson: Summary - Custom hook basics

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies