Performance & Optimization
useDebounce
About
Debounce hook for react. Internally, it uses lodash debounce.
Examples
import React, { useState } from "react";
import { useDebounce } from "rooks";
export default function App() {
const [value, setValue] = useState("");
const setValueDebounced = useDebounce(setValue, 500);
return (
<div>
<input
onChange={e => setValueDebounced(e.target.value)}
placeholder="Please type here"
/>
<div>{value}</div>
</div>
);
}Arguments
| Argument | Type | Description | Default value |
|---|---|---|---|
| callback | Function | The function to debounce | undefined |
| wait | number | The duration to debounce in milliseconds | undefined |
| options | Object | options to pass into lodash's debounce |
Return Value
| Name | Type | Description |
|---|---|---|
| debouncedFunction | Function | The debounced function |