Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 79x 79x 79x 79x 79x 79x 79x 79x 79x 79x 79x 79x | import { useState } from "react"
import { useDebounceEffect } from "@/utils/useDebounceEffect"
/**
* A custom hook that provides debounced input handling to prevent jumpy text inputs
* when saving changes directly to backend on every keystroke.
*
* @param initialValue - The initial value for the input
* @param onChange - Callback function to save the value (e.g., to backend)
* @param debounceMs - Debounce delay in milliseconds (default: 500ms)
* @returns A tuple of [currentValue, setValue] similar to useState
*/
export function useDebouncedInput<T>(
initialValue: T,
onChange: (value: T) => void,
debounceMs: number = 100,
): [T, (value: T) => void] {
// Local state to prevent jumpy input - initialize once
const [localValue, setLocalValue] = useState(initialValue)
// Debounced backend save - saves after user stops changing value
useDebounceEffect(
() => {
onChange(localValue)
},
debounceMs,
[localValue],
)
return [localValue, setLocalValue]
}
|