usePrevious

1"use client"
2 
3import * as React from "react"
4 
5/**
6 * Tracks the LAST DISTINCT value (compared with `Object.is`) — repeated
7 * equal values do not advance it, so after a "flat" update `previous` still
8 * holds the value from before the last real change (which is exactly what
9 * direction indicators want). Returns `undefined` on the very
10 * first render — there is no "previous" before the first one.
11 *
12 * Implementation note: this is deliberately NOT the classic
13 * `useRef` + `useEffect` version (`ref.current = value` written inside an
14 * effect, read back during render). That version only updates the ref after
15 * the effect has run, so what a given render reads back is "whatever the
16 * last effect happened to leave behind" — under StrictMode's double-invoke
17 * or an interrupted/resumed concurrent render, it is not well-defined which
18 * pass wrote the ref last. It also means reading a ref's `.current` during
19 * render, which this repo's lint setup treats as a smell (render should stay
20 * pure; ref reads/writes belong in effects or event handlers, not scattered
21 * across both).
22 *
23 * Here both the current and the previous value live in state, and the
24 * comparison happens during render itself: if `value` changed (checked with
25 * `Object.is`, the same equality React uses for its own bailout checks) this
26 * render calls `setState` to shift the old current into previous — the
27 * official React "adjust state during render" pattern, not a forbidden
28 * effect-body `setState`. Because the update happens inside the same render
29 * pass that noticed the change, the ordering is deterministic regardless of
30 * StrictMode or concurrent re-renders, and it never touches a ref outside of
31 * an effect.
32 */
33export function usePrevious<T>(value: T): T | undefined {
34  const [state, setState] = React.useState<{ current: T; previous: T | undefined }>({
35    current: value,
36    previous: undefined,
37  })
38 
39  if (!Object.is(state.current, value)) {
40    setState({ current: value, previous: state.current })
41  }
42 
43  return state.previous
44}
45 
46export default usePrevious