@reworkk/react-debounce

Use debounce in React

• Installation
• Advantages
• Examples
  • Expensive calculation
  • Search and HTTP requests
• API reference
  • useDebounceCallback
  • useDebounceState

Installation

• yarn add @reworkk/react-debounce
• npm install @reworkk/react-debounce

Advantages

• No dependencies
• Written in TypeScript

Examples

Expensive calculation

const [expensiveCalculation] = useDebounceCallback(() => { ... });
// if user clicks twice, the first call will be cancelled
return <button onClick={expensiveCalculation}>Click</button>

Search and HTTP requests

const [searchText, setSearchText] = useDebounceState('');
const searchParam = useMemo(() => filterValue === '' ? '' : `?search=${searchText}`, [searchText]);

useEffect(() => {
  fetch(`/api/url${searchParam}`);
}, [searchParam]);

// when you stop typing, setSearchText will be called after 300ms (default timeout)
return <input defaultValue={searchText} onChange={({ target }) => setSearchText(target.value)} />

Hooks API reference

useDebounceCallback(callback, options)

Arguments

Argument	Description
callback	Function, that will be executed after delay, if DebouncedCallback will be executed
options	Configuration object to control hook behavior (Options)

Options

Option	Description
timeMs	Delay before function will be executed (default - 300 ms)
deps	Dependencies that indicate that hook callback is changed (default - [])

Returns [DebouncedCallback, CancelFunction]

Type	Description
DebouncedCallback	Function that will execute provided callback after timeout (default - 300 ms)
CancelFunction	Function that allows to prevent callback execution

useDebounceState(defaultValue, timeMs)

Arguments

Argument	Description
defaultValue	Initial state
timeMs	Delay before state will be updated (default - 300 ms)

Returns [State, SetStateFunction, CancelFunction]

Type	Description
State	Current state
SetStateFunction	Function that allows to update current state
CancelFunction	Function that allows to prevent execution of SetStateFunction