React's Latest Ref Pattern Solves Stale Closure Bug in Debounced Callbacks

The Latest Ref Pattern, named by Yago Pereira, stores a callback inside a React ref and updates it on every render so the most current version is always available. This approach is commonly demonstrated using a custom useDebounce hook, where the debounced function calls the ref's current value instead of a stale closure. Using state instead of a ref would cause infinite re-renders, while placing the callback directly in the dependency array would recreate the debounced instance on every render, resetting the timer and breaking debounce behavior entirely. The ref acts as a bridge, keeping the debounced function instance stable while ensuring its internal callback stays up to date. React 19 formalizes this concept for effects through the new useEffectEvent API, though the ref pattern remains the recommended solution outside of effects.