PoppingPopper Posts - Reactiflux

PoppingPopper

•Created by PoppingPopper on 10/8/2022 in #react-forum

setInterval without destroying it to update state?

I have a perdicament where I want to update state on an interval. Every way that I go about it I find myself being forced to use the dependency array of the useEffect for the setInterval so I can get updated state values. This causes my interval to just be destroyed and rebuilt every interval because of state changing on the interval. How can I achieve this interval without ever having to destroy it to listen to state changes?

  const [incrementCount, setIncrementCount] = useState(1);
  const [translationX, setTranslationX] = useState([...INIT_TRANSLATION_X]);

  const incrementTranslationX = useCallback(() => {
    if (incrementCount && incrementCount % 2 === 0) { //* the condition
      setIncrementCount(0);
      setTranslationX([...INIT_TRANSLATION_X]);
    } else {
      setIncrementCount((prev) => prev + 1);
      setTranslationX((prev) => [prev[0] + INCREMENT, prev[1] + INCREMENT]);
    }
  }, [incrementCount, translationX]);

  //loop interval
  useEffect(() => {
    const interval = setInterval(() => {
      incrementTranslationX();
    }, INTERVAL);

    return () => {
      clearInterval(interval);
      console.log("DESTROYED INTERVAL");
    };
  }, [incrementTranslationX]); //! cannot update (the condition) without this

  const [incrementCount, setIncrementCount] = useState(1);
  const [translationX, setTranslationX] = useState([...INIT_TRANSLATION_X]);

  const incrementTranslationX = useCallback(() => {
    if (incrementCount && incrementCount % 2 === 0) { //* the condition
      setIncrementCount(0);
      setTranslationX([...INIT_TRANSLATION_X]);
    } else {
      setIncrementCount((prev) => prev + 1);
      setTranslationX((prev) => [prev[0] + INCREMENT, prev[1] + INCREMENT]);
    }
  }, [incrementCount, translationX]);

  //loop interval
  useEffect(() => {
    const interval = setInterval(() => {
      incrementTranslationX();
    }, INTERVAL);

    return () => {
      clearInterval(interval);
      console.log("DESTROYED INTERVAL");
    };
  }, [incrementTranslationX]); //! cannot update (the condition) without this

5 replies