use-debounced-effect

useDebouncedEffect React Hook

Install it with yarn:

yarn add use-debounced-effect

Or with npm:

npm i use-debounced-effect --save

Shorthand

useDebouncedEffect(callback, delay, dependencies)

import  React, { useState } from  'react';
import  useDebouncedEffect  from  'use-debounced-effect';

export  default  function  Input() {
	const [term, setTerm] = useState('');

	useDebouncedEffect(()=>{
	console.log(term); // debounced 1sec
	// call search api ...
	// return () => maybe cancel prev req
	}, 1000 ,[term]);

	return (
		<input  onChange={(e) => setTerm(e.target.value)}  />
	);
}

Advanced

useDebouncedEffect(callback, config, dependencies)

Config

Name	type	Description	Default/Fallback
delay	number	debounce delay	0
ignoreInitialCall	boolean	ignore first effect call	true

Example

	useDebouncedEffect(()=>{
		console.log(term); // debounced 1sec
		// call search api ...
		// return () => maybe cancel prev req
	}, 
	{ 
		delay: 1000,
		ignoreInitialCall: false
	}
	,[term]);

}