usePrevious

Syntax

usePrevious<T>(value: T): T

The usePrevious hook allows you to keep track of the previous value of something. This can be especially useful if you need to identify whether a value changed and what the difference would be.

This hook is not part of React and even we are not entirely sure whether this is actually useful. You can see that by looking at the very uninspired example below.

The current assumption is that you should avoid using this hook.

Noticing changing properties

function useOpaqueLabel({ opacity }) {
    const oldOpacity = usePrevious(opacity);
    const opaqueElement = useRef(null);
    console.log('Opacity changed from %s to %s', oldOpacity, opacity);
    return {
        opacity,
        opaqueElement
    };
}