Работа с setinterval

Question

У меня есть конпка по которой я включаю и выключаю подрузку картинок

  const [rep, setRep] = useState(false);

 
  var idInterval;
  const onRepeatClicked = () => {
    setRep(!rep);
    idInterval = setInterval(() => {
      if (!rep) {
        dispatch(getCat());
      }else{
        clearInterval(idInterval);
      }
    }, 2000);

Если я нажимаю чек бокс, то срабатывает onRepeatClicked и картинки начинают подгружаться каждый 2 сек, но если я выключаю чек бокс ,то они так же продолжают загружаться, я очищаю интервал, но почему-то затем срабатывает диспатч, подскажите в чём проблема?

Answer 1

Можно через useEffect подписаться на изменение rep и в зависимости от значения удалять/запускать интервал.

Пример на stackblitz.com

const [rep, setRep] = useState(false);

useEffect(() => {
let interval;
if (rep) {
  interval = setInterval(() => {
    console.log('dispatch');
  }, 2000);
}
return () => clearInterval(interval);
}, [rep]);

return (
<div>
  <input
    type="checkbox"
    onChange={() => setRep((prevState) => !prevState)}
    checked={rep}
  />
</div>
)}

БЛОГ НА HUSL

Работа с setinterval

Ответы (1 шт):