Description

This hook tracks the previous value of a state or prop.

🍎 Code Byte

import { useRef, useEffect } from 'react';

export const usePrevious = <T, _>(value: T) => {
  const ref = useRef<T | null>(null);

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

  return ref.current;
};

Arguments

Returns

Usage

const Component = () => {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

  return (
    <div>
      <h1>
        Now: {count}, before: {prevCount}
      </h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Tests

import { renderHook } from '@testing-library/react-hooks';
import { usePrevious } from './usePrevious.hook';

describe('usePrevious()', () => {
  it('should return null for the initial render', () => {
    const { result } = renderHook(() => usePrevious(0));

    expect(result.current).toBeNull();
  });

  it('should return the previous value after a re-render', () => {
    const { result, rerender } = renderHook(({ value }) => usePrevious(value), {
      initialProps: { value: 0 }
    });

    // Initial render
    expect(result.current).toBeNull();

    // Update with new value
    rerender({ value: 1 });
    expect(result.current).toEqual(0);

    // Update with another new value
    rerender({ value: 2 });
    expect(result.current).toEqual(1);
  });
});