React usePrevious Hook: Track Previous State & Props (2026)

Summary

React usePrevious Hook: Track Previous State & Props (2026)

The Classic Recipe, and Where It Frays

return ( <div> <button onClick={() => setCount(count + 1)}>+1</button> <button onClick={() => setDark(!dark)}>toggle theme</button> {prevCount !== undefined && prevCount !== count && ( <span>{count > prevCount ? "↑ went up" : "↓ went down"}</span> )} </div> ); }

usePrevious — Previous Value, Not Previous Render

function Counter() { const [count, setCount] = useState(0); const [dark, setDark] = useState(false); const prevCount = usePrevious(count);

return ( <div> <button onClick={() => setCount(count + 1)}>+1</button> <button onClick={() => setDark(!dark)}>toggle theme</button> <p>Now: {count}, before: {prevCount ?? "—"}</p> </div> ); }

if (value !== current) { setPrevious(current); setCurrent(value); }

return previous; }

Wait — setState During Render?

The Gotcha: Unstable Objects

usePrevious vs useLatest

Real Use Cases

SSR Safety

Takeaways

Source

This article discusses content originally published by at Dev.to.

Read the original article