Tracking Previous Values with Custom Hooks

Snippet

Tracking Previous Values with Custom Hooks

Since useEffect runs after the render is committed, you can use a ref to store the 'current' value during the effect. This allows you to access the value from the previous render cycle during the next one.

snippet.js
javascript
function usePrevious(value) {
  const ref = useRef();
 
  useEffect(() => {
    ref.current = value;
  }, [value]);
 
  return ref.current;
}
 
// In a component:
const prevCount = usePrevious(count);

react

Breakdown

const ref = useRef();

Creates a persistent object that stays the same across renders.

ref.current = value;

Updates the ref with the new value after the render has finished.

return ref.current;

Returns the value assigned during the *previous* effect run.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Tracking Previous Values with Custom Hooks

Related