File size: 1,846 Bytes
aa2e6af | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | import debounce from 'lodash/debounce';
import React, { useState, useCallback } from 'react';
import type { SetterOrUpdater } from 'recoil';
import type { TSetOption } from '~/common';
import { defaultDebouncedDelay } from '~/common';
/** A custom hook that accepts a setOption function and an option key (e.g., 'title').
It manages a local state for the option value, a debounced setter function for that value,
and returns the local state value, its setter, and an onChange handler suitable for inputs. */
function useDebouncedInput<T = unknown>({
setOption,
setter,
optionKey,
initialValue,
delay = defaultDebouncedDelay,
}: {
setOption?: TSetOption;
setter?: SetterOrUpdater<T>;
optionKey?: string | number;
initialValue: T;
delay?: number;
}): [
(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | T) => void,
T,
SetterOrUpdater<T>,
// (newValue: string) => void,
] {
const [value, setValue] = useState<T>(initialValue);
/** A debounced function to call the passed setOption with the optionKey and new value.
*
Note: We use useCallback to ensure our debounced function is stable across renders. */
const setDebouncedOption = useCallback(
debounce(setOption && optionKey ? setOption(optionKey) : setter, delay),
[],
);
/** An onChange handler that updates the local state and the debounced option */
const onChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | T) => {
const newValue: T =
typeof e !== 'object'
? e
: ((e as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>)?.target
.value as unknown as T);
setValue(newValue);
setDebouncedOption(newValue);
},
[setDebouncedOption],
);
return [onChange, value, setValue];
}
export default useDebouncedInput;
|