useDebounceLoader React Hook

A React hook that exposes the pending state of a debounced value.

This is useful to show loading, typing and pending user interactions.

Installation

yarn
yarn install use-debounce-lodader

npm
npm install use-debounce-loader

Example

https://codesandbox.io/s/frosty-antonelli-idx3l?file=/src/App.js:36-53

userInput.jsx

import React, { useState } from 'react';
import { useDebounceLoader } from 'use-debounce-loader';

export default function Input() {
const [onChange, {
isLoading,
value,
}] = useDebounceLoader()

return (

);
}

API

The useDebounceLoader returns a callback to trigger the debounce and the current state of the debounce

useDebounceLoader: (options: Options) => [
(newValue: T) => void,
{
isLoading: boolean;
value: T;
}
]

onChange (newValue: T) => void

Call this function with the value you wish to debounce.

const [onChange, debouncer] = useDebounceLoader()

useEffect(() => {
onChange('First value)
})

return (
onChange=(e => onChange(e.target.value)
/>
)

isLoading boolean

Whether the value is currently being debounced.

value T

The current value being debounced - this will be updated as soon as the onChange callback is fired.

Optional Arguments

You can also pass a range of options to customise the behaviour of the debouncer.

interface Options {
debounceTime?: number;
initialValue?: T;
onFinish?: (value: T) => void;
}

Example

const [onChange, debouncer] = useDebounceLoader({
debounceTime: 2000,
initialValue: 100,
onFinish,
})

debounceTime (Optional) number

Set the time you wish to debounce in milliseconds.

Default is 1000ms - 1 second.

initialValue (Optional) T

The initialValue to set as the debounced value

onFinish (Optional) (value: T) => void

Will fire when the debouncer has resolved. This is useful to trigger data fetches or other side effects.

const onFetchData = (search: string) => {
// Perform some request
}

const [onChange, debouncer] = useDebounceLoader({
onFinish: onFetchData,
})

Note - debouncer.value will be the same as the search