Jak zabić stary setInterval a uruchomić nowy?

Piszę tracker kryptowalut, zatrzymałam się w miejscu, gdzie użytkownik decyduje się przełączyć na inną kryptowalutę.
Najpierw najmniej ważna część, tylko dla porządku:

async function getCurrentPrice(success, failure,data){
const [cryptoID, referenceCoin, text] = data;
const resp = await Axios.get(link.currentPrice(cryptoID, referenceCoin), link.header).catch((error=>{failure(error, cryptoID)}));
try{
const data = [Object.keys(resp.data)[0], Object.values(resp.data)[0] ];
success(data);
}
catch(error){failure(error, cryptoID)};

}

Ogólnie, pobrane dane są wysyłane do reducera, błędy też idą do reducera.

function getCurrentPrices (success, failure, x) {
  clearInterval(Loop);
      const Loop = () => {
      getCurrentPrice(success, failure, x)
    }
   let repeater = window.setInterval(Loop, 5000); 
}

To jest pętla, która zapewnia powtarzalność operacji

useEffect(()=>{
if (searchInput && searchInput.length) {
    getCurrentPrices(send_current, current_bad_data, searchInput/*[...searchInput]*/);
  }
},[searchInput]);

A to fragment komponentu gdzie wsztystko jest zamknięt w useEffect. SearchInput to fragment stanu, który przecgowuje mi.in aktualną kryptowalutę.

I wszytko byłoby elegnacko, gdyby nie fakt, że po zmianie wybranej kryptowaluty do reducera lecą dane z nowej i starej krypto. Zrobiłam kilka różnych prób ale nic to nie zmienilo - deklarowałam Looop poza pętlą, przenosiłam clearInterval - bez efektu. Sprawa pewnie jest banalna ale nie mam pomysłu a gapię się na to na tyle długo, że tracę dystans. Może ktoś ma jakąś sugestię?

clearInterval(uchwyt_intervala);

https://www.w3schools.com/jsref/met_win_clearinterval.asp

Freja Draco napisał(a):

clearInterval(uchwyt_intervala);

https://www.w3schools.com/jsref/met_win_clearinterval.asp

Znam tę operację, tylko że ona jakby nie działała, w każdym razie nie idzie jej prosto zastosować. Mam wrażenie ze za każdym razem kiedy wywoływane jest useEffect tworze nową instancję funkcji getCurrentPrices. Zresztą spojrzyjcie sami na środkowy fragment - tam to jest zastosowane. I nie działa

Doctanna napisał(a):

Freja Draco napisał(a):

clearInterval(uchwyt_intervala);

https://www.w3schools.com/jsref/met_win_clearinterval.asp

Znam tę operację, tylko że ona jakby nie działała, w każdym razie nie idzie jej prosto zastosować. Mam wrażenie ze za każdym razem kiedy wywoływane jest useEffect tworze nową instancję funkcji getCurrentPrices. Zresztą spojrzyjcie sami na środkowy fragment - tam to jest zastosowane. I nie działa

Przeczytaj dokładnie dokumentacje clearInterval() i zobacz jakie parametry przyjmuje. Porównaj je z jakimi Ty ją wywołujesz.

async function immed (){
  const [cryptoID, referenceCoin, text] = searchInput; 
  const resp = await Axios.get(link.currentPrice(cryptoID, referenceCoin), link.header).catch((error=>{current_bad_data(error, cryptoID)}));
  // /resp && resp.data && Object.keys(resp.data).length && success(resp.data);
  try{
  const data = [Object.keys(resp.data)[0], Object.values(resp.data)[0] ];
  send_current(data);
  }
  catch(error){current_bad_data(error, cryptoID)};
  }

var myVar;

useEffect(()=>{

if (searchInput && searchInput.length) {
   
   clearInterval(myVar) ;
   
   myVar = setInterval(immed, 5000);


  }
},[searchInput]);

Przykład uprościłam na maksa, wywaliłam pośrednią funkcję - dla zgodności z wzorcem, ale efekt ten sam.

Pokaz więcej kontekstu - głównie dookoła myVar.

Ok, rozwiązanie jest, ale bardzo nieeleganckie. Nie uwzględniłam, że niejako mimochodem odświeżam CAŁY komponent. NB nie dałam całego kodu, bo długi i by zamącał. Jeżeli myVar zadeklaruję ponad komponentem - mniej więcej tam gdzie importy i takie tam różne - to działa jak powinno. Pytanie tylko czy jest jakieś eleganckie rozwiązanie problemu, bo te jest no takie sobie... Wysłać myVar do reducera?

Czyli memoizacja