usePrevious

Preview in your theme

Counter — now vs. the value from one render ago

previous—

now0

On the very first render, previous is undefined (shown as “—”) — there is no render before the first one.

Direction indicator — the prototype behind a price-change ↑/↓ badge

$128.40

The whole badge is price > previous ? "up" : "down"— no separate direction state to keep in sync with the price. On a repeated tick (like the flat 129.1 → 129.1 step) the arrow keeps its last real direction — previous holds the last DISTINCT value, so flat ticks don't wipe the trend.

Reference equality — usePrevious compares with Object.is, not a deep-equality check

{"name":"Ada"}unrelated re-renders so far: 0

Bumping the unrelated counter re-renders this component, but user keeps the same reference, so previous never moves. Mutating the same object in place instead of creating a new one would look identical to the idle state above — usePrevious can only see reference changes, never in-place mutation.

Loading preview…

"use client"

import * as React from "react"

/**
 * Tracks the LAST DISTINCT value (compared with `Object.is`) — repeated
 * equal values do not advance it, so after a "flat" update `previous` still
 * holds the value from before the last real change (which is exactly what
 * direction indicators want). Returns `undefined` on the very
 * first render — there is no "previous" before the first one.
 *
 * Implementation note: this is deliberately NOT the classic
 * `useRef` + `useEffect` version (`ref.current = value` written inside an
 * effect, read back during render). That version only updates the ref after

Installation

npx shadcn@latest add https://ui.zyeon.ai/r/use-previous.json

Prompt

Build a React + TypeScript "usePrevious" hook (no dependencies beyond React).

Contract
- `usePrevious<T>(value: T): T | undefined`.
- Returns `undefined` on the first render for a given hook instance.
- From the second render on, returns whatever `value` was during the
  moment before the last DISTINCT change — repeated equal values do not
  advance it (an equality-gated snapshot, not a strict render-history log).

Behavior
- Comparison is `Object.is(value, <currently tracked value>)` — reference
  equality, the same check React itself uses for bailing out of state
  updates. A new object/array with identical-looking contents counts as a
  change; mutating the same object in place and passing the same reference
  does not.
- Implemented as one piece of state, `{ current, previous }`, not a `useRef`
  + `useEffect` pair: when a render observes `value !== current` (via
  `Object.is`), it calls `setState` right there in the render body to shift
  `current` into `previous` before paint — React's documented "adjust state
  during render" pattern. This keeps the update inside the same render pass,
  so the result is deterministic under StrictMode's double-invoke and safe
  if React discards and retries a concurrent render. The ref+effect version
  instead writes `.current` from inside an effect, one commit after the
  render that reads it — the ordering across StrictMode/concurrent renders
  is not well-defined, and reading a ref's `.current` synchronously during
  render is a smell most hook lint setups (including this repo's) call out.
- No effect, no ref, no timer, and nothing to clean up on unmount.

Rendering & styling
- Renders nothing itself — it is a pure value hook. Consumers own all UI,
  e.g. compare the returned previous value against the current one to
  render an up/down arrow with `text-primary` / `text-destructive`, or check
  against `undefined` to special-case the first render.

Customization levers
- Swap `Object.is` for a custom equality function (e.g. shallow-equal for
  objects, or a rounding comparator for near-equal floats) if reference
  equality is too strict for a given value type.
- Derive a `direction: "up" | "down" | null` from the returned previous value,
  as the demo does, when a consumer only cares about the sign of the change
  rather than the raw previous value itself.

Concepts

Render-time state adjustment — the React-documented pattern of calling setState conditionally inside the render body (not inside useEffect) to derive one piece of state from another; React detects the change and re-renders immediately, in the same commit, instead of committing stale UI and correcting it a tick later.
Object.is comparison — the hook compares by reference, exactly like React's own state bailout check; a structurally-identical-but-new object registers as a change, and an in-place mutation of the same object does not.
Why not useRef + useEffect — that version writes ref.current = value after the render commits, so the render that reads ref.current is always racing the effect that last wrote it; under StrictMode's double-invoked effects or an interrupted/resumed concurrent render, which write "wins" is not guaranteed. It also means reading a ref's .current synchronously during render, which this repo's lint setup flags.
One render behind, not a history stack — the hook only ever holds the single immediately-preceding value; it cannot answer "what was the last different value three changes ago" (see Not when).
Derived direction, not stored direction — the demo's up/down arrow is computed fresh every render from price > previous, not stored as its own piece of state — one less thing that can drift out of sync with the value it describes.

Installation

Prompt

Concepts

On This Page