useDebounce Hook
Implement useDebounce(value, delay): a hook that returns value, but only updates its result once value has stopped changing for delay milliseconds. The demo around it counts how many "requests" a search box would send.
Requirements
- The returned value starts equal to the initial
value. - While the value keeps changing within
delay, the returned value stays unchanged; it catches updelayms after the last change. - Changing
delayrestarts the wait. - No timer is left behind when the component unmounts.
- With the hook working, typing a word quickly in the demo sends one request, not one per keystroke.
Hints
Hint 1
Keep the debounced value in useState, initialised from value.
Hint 2
One useEffect on [value, delay] sets a timeout that copies value into state and returns a cleanup that clears it. Each change cancels the previous timeout before scheduling a new one.