Почему может не работать debounce?

Question

[Mesuti]

Привет!
Почему срабатывает без задержки?

function debounce(fn, ms) {
    let timeout;
    return function () {
      const fnCall = () => {
        fn.apply(this, arguments);
      };
      clearTimeout(timeout);
      timeout = setTimeout(fnCall, ms);
    };
  }

  useEffect(() => {
    debounce(getData(), 2000);
  }, [state.query]);

  function getData() {
...

https://stackblitz.com/edit/react-dadata-yf32o2

Comments

[WbICHA]

Потому что в дебоунс надо передавать функцию.
И использовать его по назначению, а не как обычный таймаут.

[WbICHA]

Mesuti, во всём перечисленном.

Answer 1

[0xD34F]

debounce(getData(), 2000);

То есть, за как минимум четыре с половиной года занятий программированием вы не научились различать собственно функцию и результат её вызова. Ну тут только рукой махнуть, случай безнадёжный.

Кроме того, debounced функция при каждом рендере компонента должна быть одна и та же, так что завернём её в useCallback, а чтобы она использовала актуальное состояние, будем передавать его как параметр:

const getData = useCallback(debounce(query => {
  /*
   * здесь всё по-старому, кроме body: JSON.stringify({ query: state.query }),
   * надо заменить на body: JSON.stringify({ query }),
   */
}, 2000), []);

useEffect(() => {
  getData(state.query);
}, [ state.query ]);

Comments

[Mesuti]

Спасибо за ответ!
Буду разбираться c примером.

Если быть точнее, ~6 лет.
Да, Вы правы, безнадежный.