JAVASCRIPT

Custom usePrevious Hook to Track Previous State in React

Access the previous value of any prop or state in a React component using this custom hook. Useful for comparing current and past values in `useEffect` or other logic.

import { useRef, useEffect } from 'react';

function usePrevious(value) {
  const ref = useRef();

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

  return ref.current;
}
How it works: The `usePrevious` hook provides a way to store and retrieve the previous value of a prop or state variable. It utilizes `useRef` to create a mutable `ref` object that persists across renders without causing re-renders itself. Inside a `useEffect` hook, the `ref.current` is updated with the `value` after each render. When the component renders again, `ref.current` will hold the value from the *previous* render.

Related JAVASCRIPT Snippets

Need help integrating this into your project?

Our team of expert developers can help you build your custom application from scratch.

Hire DigitalCodeLabs