Set input value with a debounced onChange handler

Question

In my React Hooks app I need to let user type to an input field for 1000ms. When 1000ms expire an API request is sent with the input value.

<input type='text' name='name' className='th-input-container__input' onChange={evt => testFunc2(evt.target.value)} />

The value is set in testFunc2(evt.target.value):

const testFunc2 = useCallback(debounce((text) => setNameFilter(text), 1000), []);

Once nameFilter is set to a new value useEffect issues an API request since nameFilter is its dependency. That way the API is queried with only the resulting user input instead of with each key stroke value but the input stays uncontrolled. When I add the current nameFilter value to the input with value={nameFilter} user cannot type into the input and the input receives only the last typed character.

How do I get the user typed characters to display in the input?

Just curious, do you write your own `debounce` function or use lodash's one? — Loi Nguyen Huynh, Dec 16 '19 at 14:16

Loi Nguyen Huynh · Accepted Answer · 2019-12-16T15:37:49.997

5

Updated answer:

const debouncedApiCall = useCallback(debounce((text) => {
  getRecordsForPage(1, text, '', '', '', '', 10, {});
}, 1000), [])

useEffect(() => {
  debouncedApiCall(nameFilter);
}, [nameFilter, debouncedApiCall])

<input type='text' value={nameFilter} onChange={evt => setNameFilter(evt.target.value)} />

edited Dec 16 '19 at 15:37

answered Dec 16 '19 at 14:10

Loi Nguyen Huynh

8,492
2
29
52

2

Here's changes I applied to your solution to make it produce the desired result. Please consider adding those to the solution so I can accept it. `const debouncedApiCall = useCallback(debounce((text) => getRecordsForPage(1, text, '', '', '', '', 10, {}), 1000), []);`. `useEffect(() => { debouncedApiCall(nameFilter); }, [nameFilter, debouncedApiCall]);`. The `input` element code is as provided in your solution. `getRecordsForPage` is the API call method to send a request. – El Anonimo Dec 16 '19 at 14:51
1

Thank you for the nice and timely solution. You missed the `[]` dep array in `useCallback` in `const debouncedApiCall`. Please add it so the code will look correct. – El Anonimo Dec 16 '19 at 15:02
@ElAnonimo Sorry, I haven't used React for a while and deliberately missed it. Thank you for your correction. – Loi Nguyen Huynh Dec 16 '19 at 15:26
Please remove `, 1000` from the `getRecordsForPage` arguments. It's the `debounce` timeout value. The `getRecordsForPage` arguments are all listed in the first parens only. – El Anonimo Dec 16 '19 at 15:33

Set input value with a debounced onChange handler

1 Answers1

Linked