import { MutableRefObject, useCallback, useRef } from "react"; type CurrentValueRef = MutableRefObject; type SetValue = (nextValue: T) => void; type ResetValue = () => void; type ReturnValue = [CurrentValueRef, SetValue, ResetValue]; /** * Creates a temporary value that gets reset every `x`ms back to the provided * default value. This is useful when doing keyboard searching or other * interactions. * * NOTE: This does not force a re-render when the value changes and instead uses * a ref value instead. * * @typeparam T the type for the value * @param defaultValue The default value to use. Each time the reset timeout is * triggered, this value will be set again. * @param resetTime The amount of time before the value is reset back to the * default value */ export default function useTempValue( defaultValue: T, resetTime: number = 500 ): ReturnValue { const value = useRef(defaultValue); const timeout = useRef(); const resetValue = useCallback(() => { window.clearTimeout(timeout.current); value.current = defaultValue; }, [defaultValue]); const setValue = useCallback( (nextValue: T) => { value.current = nextValue; window.clearTimeout(timeout.current); timeout.current = window.setTimeout(resetValue, resetTime); }, [resetTime, resetValue] ); return [value, setValue, resetValue]; }