MCPcopy
hub / github.com/facebook/react / useDebounce

Function useDebounce

packages/react-devtools-shell/src/app/EditableProps/index.js:149–174  ·  view source on GitHub ↗
(value: number, delay: number)

Source from the content-addressed store, hash-verified

147
148// Below copied from https://usehooks.com/
149function useDebounce(value: number, delay: number) {
150 // State and setters for debounced value
151 const [debouncedValue, setDebouncedValue] = useState(value);
152
153 // Show the value in DevTools
154 useDebugValue(debouncedValue);
155
156 useEffect(
157 () => {
158 // Update debounced value after delay
159 const handler = setTimeout(() => {
160 setDebouncedValue(value);
161 }, delay);
162
163 // Cancel the timeout if value changes (also on delay change or unmount)
164 // This is how we prevent debounced value from updating if value is changed ...
165 // .. within the delay period. Timeout gets cleared and restarted.
166 return () => {
167 clearTimeout(handler);
168 };
169 },
170 [value, delay], // Only re-call effect if value or delay changes
171 );
172
173 return debouncedValue;
174}
175// Above copied from https://usehooks.com/

Callers 3

StatefulFunctionFunction · 0.85
index.jsFile · 0.85
FunctionWithHooksFunction · 0.85

Calls 3

useStateFunction · 0.90
useDebugValueFunction · 0.90
useEffectFunction · 0.90

Tested by

no test coverage detected