Function useDefer

useDefer<T>(input, delay): T

Delays the update of a value until the input has stopped changing for a certain time. This is different from React's built-in useDeferredValue because you can set the delay yourself.

Type Parameters

Parameters

input: T
The value to defer and output.
delay: number
The amount of time to wait after input has stopped changing before outputting it.

Returns T

The deferred input value.

Example

const DemoUseDefer = () => {
    const [value, setValue] = useState("");
    const displayValue = useDefer(value, 500);
    return (
        <div>
            <input
                type="text"
                value={value}
                onInput={(e) => setValue((e.target as HTMLInputElement).value)}
            />
            <ul>
                {displayValue}
            </ul>
        </div>
    );
};