How the useDebounce Hook Fixes Common React Debouncing Mistakes

When users type in a search box, React components can fire an API request on every keystroke, generating redundant and stale calls. A common workaround is writing debounce logic manually with setTimeout inside components, but this approach introduces bugs like memory leaks on unmount, stale closures, and scattered duplicate code. The useDebounce hook from @reactuses/core addresses all three issues by wrapping lodash.debounce internally, handling edge cases like leading and trailing execution. It works by maintaining two separate values: a fast-updating one bound to the UI input, and a debounced one used to trigger side effects only after typing pauses. This pattern keeps the input responsive while reducing API calls to one per typing pause rather than one per keystroke.