Setting back to original value before debounce breaks.

[saiichihashimoto]

If you set a value and set it back to its original value before the time, then it will use the first value.

For example:

function SomeComponent() {
	const [value, setValue] = useState('');
	const [debouncedValue] = useDebounce(value, 1000);

	return (
		<Fragment>
			<input type="text" value={value} onChange={({ target: { value: inputValue } }) => setValue(inputValue)} />
			{debouncedValue}
		</Fragment>
	);
}

If you type in "Hello", then delete it before the 1000ms, the debouncedValue will be "Hello" after 1000ms. This happens in general when you set it back to whatever it started as before the timeout.

[xnimorz]

Hello, @saiichihashimoto !

Thank you for the issue!
I'll fix it within 1 or 2 days and will write here when I publish the new release

[xnimorz]

Hello again, @saiichihashimoto !

I've published use-debounce@2.0.2, which includes this fix.

You can try it in this demo: https://codesandbox.io/s/kx75xzyrq7
Also, there is a unit test for your case: https://github.com/xnimorz/use-debounce/blob/master/test/cache.test.js#L160

[xnimorz]

I’ll close the issue. If you have any additional questions feel free to reopen or create the new one.