JAVASCRIPT
React usePrevious Hook for Storing Past State
Learn how to create a custom React hook, `usePrevious`, to store and retrieve the previous value of any state or prop, enabling advanced comparison 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 leverages `useRef` to store a mutable value that persists across renders without causing re-renders itself. Inside a `useEffect` hook, it updates the `ref.current` to the current `value` after every render. This ensures that on the *next* render, `ref.current` will hold the value that was current in the *previous* render, making it perfect for comparing current and past states or props.