usePrevious

usePrevious is a React hook that returns the previous value of the input state. It preserves the previous value unchanged when re-render occur without state changes. If the state is an object or requires custom change detection, a compare function can be provided. By default, state changes are detected using prev === next.

Interface

function usePrevious<T>(
  state: T,
  compare: (prev: T | undefined, next: T) => boolean
): T | undefined;

Parameters

• staterequired · T
  

  The state whose previous value is to be tracked.

• compare(prev: T | undefined, next: T) => boolean
  

  An optional comparison function to determine if the state has changed.

Return Value

• T | undefined
  

  previous value of the state.

Example

const [count, setCount] = useState(0);
// initial value of previousCount is `0`
const previousCount = usePrevious(count);