Implement a React `usePrevious(value)` hook that returns the value this component had on its previous render. Where must the ref be written, and what does the hook return the first time it runs?

## The implementation ```js import { useRef, useEffect } from 'react'; function usePrevious(value) { const ref = useRef(undefined); useEffect(() => { ref.current = value; }); return ref.current; } ``` Three details carry the whole answer: the storage is a ref, the write is in an effect, and the read happens before the write. ## Why a ref and not state The previous value is something you want to *remember* across renders without causing one. Putting it in `useState` and setting it during or after render creates a second render for every update — at best wasteful, at worst an infinite loop, since setting the previous value is itself a change that triggers another render. A ref is a mutable box React keeps attached to the component instance across renders and never watches; writing to it has no effect on rendering at all. That is exactly the semantics wanted here: remember, do not react. ## Why the write goes in an effect Render in React is expected to be pure: given the same props and state, the component body should produce the same output and touch nothing outside itself. React relies on that — under concurrent rendering a render can be started, abandoned, and started again, and in development StrictMode deliberately double-invokes component bodies to surface impurity. A `ref.current = value` line sitting in the body is a side effect during render: run it twice and the "previous" value silently becomes the current one. Effects run after the commit, once React has finished putting the result on screen. So the sequence for each render is: 1. Component body runs; `usePrevious` reads `ref.current`, which still holds the value written after the *last* commit. 2. React commits the output. 3. The effect fires and sets `ref.current = value`, arming the ref for the next render. Note the deliberate absence of a dependency array. The effect must run after *every* commit, otherwise the stored value drifts out of sync whenever the component re-renders for an unrelated reason and `value` later changes. ## What "previous" actually means here A common misunderstanding is that the hook gives you the previous *value* — the value before the last change. It does not: it gives you the value at the previous *render*. If the component re-renders three times while `value` stays `5`, the hook returns `5`, not whatever came before the 5. That is usually what you want for comparisons like "did this prop change since last time", but it is not a change history. The first render is the other edge: the effect has never run, so `ref.current` is the initial `undefined`. In TypeScript, type it honestly: ```ts function usePrevious<T>(value: T): T | undefined { const ref = useRef<T | undefined>(undefined); useEffect(() => { ref.current = value; }); return ref.current; } ``` Seeding the ref with the initial value instead (`useRef(value)`) makes the first render report "previous === current", which hides the mount case rather than solving it; callers then cannot distinguish "unchanged" from "first time". ## When to reach for it, and when not to `usePrevious` is genuinely useful for comparing a rendered value to its last rendered version: animating a number in the direction it moved, logging transitions, or firing an imperative call only when a prop actually changed. It is a poor substitute for two things people misuse it for. First, deriving state — if you need a value computed from props, compute it during render rather than tracking the old one. Second, resetting state when an identity changes: giving the component a `key` tied to that identity re-mounts it with fresh state and is both simpler and less error-prone than diffing. ## Variants worth knowing If you want the previous value only when it changed, compare inside the hook and store both: ```js function usePreviousDistinct(value) { const current = useRef(value); const previous = useRef(undefined); if (!Object.is(current.current, value)) { previous.current = current.current; current.current = value; } return previous.current; } ``` This version mutates during render, which is the trade-off it makes to be correct immediately rather than one commit later — and it is only defensible because the mutation is idempotent for a given `value`, so a replayed render produces the same answer. It is worth being able to explain that trade-off rather than presenting either version as the one true implementation.