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
Arguments | Type | Default | Required | Description |
---|
value | any | - | ✅ | The currrent value to be tracked and stored as the previous value. |
Returns
Returns | Type | Description |
---|
value | any | The previous value of the tracked state. On initial render it will return null. |
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);
});
});