Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProReturn the value from before the latest change, so you can compare it with the current one, for example to animate a change or detect a direction.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it to know what a prop or state was before it changed: to show an up or down arrow beside a price, to run an effect only on an increase, or to animate from the old value.
Do not use it to keep a longer history (use useValueHistory) or to undo changes (use useUndoState).
import { usePrevious } from "@/hooks/use-previous"const previous = usePrevious(price)
const direction =
previous === undefined || previous === price
? "same"
: price > previous
? "up"
: "down"usePrevious<T>(value: T): T | undefined
| Name | Type | Description |
|---|---|---|
value | T | The current value. |
| Returns | T | undefined | The value before the latest change. undefined until it changes. |
It returns the value from before the latest change. Re-rendering with the same value keeps returning that earlier value, so the answer is stable across unrelated renders.
A hook has no markup. If you show a change as a colour or an arrow, also say it in text (for example "up 2") so it is not colour-only.
The hook ships with renderHook tests (use-previous.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.