Strange behaviour with React useState + debounce

[pxtnpxtn]

Hello!

I am trying to get debounce to work in my project. In the input's onChange, if it also contains a setState, then the debounce function stops working and instead prints out each key stroke individually. I'm wanting the setState to be there, because the value will come from localStorage, and the useState's value is used elsewhere in my app.

https://codesandbox.io/s/adoring-nova-exxfwf?file=/src/App.js

Any explanation on what is happening and how I can work around it would be much appreciated!

Thanks.

[niksy]

@pxtnpxtn is this similar to #47?

[Hades30]

wrapping the debounce function with useCallback fixed the problem , this happens because whenever a state changes , you are creating multiple debounce functions which is basically creating multiple callbacks with a delay.

[pxtnpxtn]

wrapping the debounce function with useCallback fixed the problem , this happens because whenever a state changes , you are creating multiple debounce functions which is basically creating multiple callbacks with a delay.

That does make a lot of sense, thank you @Hades30. I wrapped it in a useCallback though and not doesn't seem to be logging anything at all. What am I missing?

const searchAddress = useCallback(() => {
    debounce(1000, (text) => {
      console.log("text==>", text);
      // Some API call
    });
  }, []);

https://codesandbox.io/s/adoring-nova-exxfwf?file=/src/App.js

[Hades30]

https://codesandbox.io/s/cocky-merkle-xvi09j?file=/src/App.js

[pxtnpxtn]

Thank you kindly @Hades30. Really appreciate your time.

For anyone in the future facing this issue:

const searchAddress = useCallback(
    debounce(1000, (text) => {
      console.log("text==>", text);
      // Some API call
    }),
    []
);