Function: useDebounce()

@arolariu/components

---

@arolariu/components / useDebounce

Function: useDebounce()

useDebounce<T>(value, delay): T

Defined in: hooks/useDebounce.tsx:36

Debounces a value, delaying updates until after the specified delay has elapsed.

Type Parameters

T

T

The type of the value being debounced.

Parameters

value

T

The value to debounce.

delay

number

The delay in milliseconds before the debounced value updates.

Returns

T

The debounced value.

Remarks

This hook returns a debounced version of the provided value that only updates after the value has stopped changing for the specified delay. Useful for optimizing performance in scenarios like search inputs, where you want to avoid triggering expensive operations on every keystroke.

The debounce timer resets on every value change and cleans up automatically on unmount.

Example

function SearchInput() {
  const [searchTerm, setSearchTerm] = useState("");
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  useEffect(() => {
    // Expensive search operation
    performSearch(debouncedSearchTerm);
  }, [debouncedSearchTerm]);

  return <input value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />;
}