Module Hook/Use Debounce Submit

[!WARN] These hooks are marked as deprecated, instead of debouncing at the component-level, do it at the route-level. See https://sergiodxa.com/tutorials/debounce-loaders-and-actions-in-react-router.

useDebounceFetcher and useDebounceSubmit are wrappers of useFetcher and useSubmit that add debounce support.

These hooks are based on @JacobParis' article.

import { useDebounceFetcher } from "remix-utils/use-debounce-fetcher";

export function Component({ data }) {
	let fetcher = useDebounceFetcher<Type>();

	function handleClick() {
		fetcher.submit(data, { debounceTimeout: 1000 });
	}

	return (
		<button type="button" onClick={handleClick}>
			Do Something
		</button>
	);
}
Copy

Usage with useDebounceSubmit is similar.

import { useDebounceSubmit } from "remix-utils/use-debounce-submit";

export function Component({ name }) {
	let submit = useDebounceSubmit();

	return (
		<input
			name={name}
			type="text"
			onChange={(event) => {
				submit(event.target.form, {
					navigate: false, // use a fetcher instead of a page navigation
					fetcherKey: name, // cancel any previous fetcher with the same key
					debounceTimeout: 1000,
				});
			}}
			onBlur={() => {
				submit(event.target.form, {
					navigate: false,
					fetcherKey: name,
					debounceTimeout: 0, // submit immediately, canceling any pending fetcher
				});
			}}
		/>
	);
}
Copy