The hook stores the latest value in local state and, every time the input changes, schedules a setTimeout to copy it across after delay ms. The cleanup function in useEffect cancels the previous timeout whenever the value changes again, which is the entire trick: only the last keystroke ever lands. Reach for this when a downstream effect (a network call, an expensive layout) should not run on every keystroke. Time complexity is O(1) per change, and the debounced state always converges to the latest input after delay ms of quiet.

Trailing-edge debounce feels laggy for the very first event because the user has to wait the full delay to see anything happen. The leading-edge variant fires immediately if more than delay ms have passed since the last fire, then settles back into trailing-edge behaviour for the rapid follow-ups. The useRef keeps the last-fire timestamp without triggering a re-render. Use this for buttons that should respond instantly on the first click but throttle accidental double-taps, or for autosuggest UIs where the first keystroke must show results without delay.

Sometimes you want to debounce a function (a fetch, an analytics call, a save) rather than a value. The callback variant stores the latest function in a ref so closures captured by parent components stay current without re-creating the timer. Each call cancels the pending timer and reschedules, so only the trailing call within delay ms actually fires. This is the right shape for onChange handlers that fire many times per keystroke, since it lets the input itself stay synchronously responsive while side effects are deferred.