Czemu należy skorzystać z useCallbacka przy użyciu metody debounce z loadash ?

Czemu należy skorzystać z useCallbacka przy użyciu metody debounce z loadash ?

// import debounce
import {debounce} from "lodash";
// zmiana wewnątrz komponentu
const delayCallApi = React.useCallback(debounce(search => callApi(search), 1000), []);
const onChange = e => {
    setSearch(e.target.value);
    delayCallApi(e.target.value);
}

sajek587 napisał(a):

Czemu należy skorzystać z useCallbacka przy użyciu metody debounce z loadash ?

Po to żeby ponowne rendery (którymi zarządza React) nie wpłynęły na debounce'owany callback.

Chodzi o to, że w debounce np wartosc search moze sie zresetowac przy ponownym renderingu?

sajek587 napisał(a):

Chodzi o to, że w debounce np wartosc search moze sie zresetowac przy ponownym renderingu?

Nie "może się zresetować", tylko zresetuje się.

1. Debounce działa tak, że wykonuje funkcje dopiero gdy po ostatnim wywołaniu upłynie określony czas.

2. Aby coś takiego zaimplementować, trzeba przechowywać gdzieś ten timer wywołujący funkcję:

   function debounce(func, timeout = 300){
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => func(timer), timeout);
    };
   }
   

   Debounce zwraca więc zupełnie nową funkcję, która przechowuje timer i po odpowiednim czasie wykonuje tą twoją funkcję.
   Jeżeli wywołasz dwa razy debounce, to wygenerujesz 2 nowe funkcje z własnymi licznikami.

3. Jeżeli napisałbyś tak:

   const delayCallApi = debounce(search => callApi(search), 1000)
   const onChange = e => {
       setSearch(e.target.value);
       delayCallApi(e.target.value);
   }
   

   to jak komponent by się przerenderował to debounce stworzyłoby nową funkcję delayCallApi.

   Więc jakby nastąpiła taka sytuacja: wywołanie delayCallApi(), rerender komponentu, delayCallApi()
   to ta Twoja funkcja, którą chciałeś zdebouncować wykonałaby się 2 razy, ponieważ wywołasz 2 różne funkcje delayCallApi, z dwoma różnymi timerami

4. useCallback() sprawia, że rerender nie utworzy nowej funkcji przy każdym rerenderze, co oznacza, że wywołanie delayCallApi() zawsze bedzie wywoływać jedną i tą samą funkcję i resetować ten sam licznik.