R
Reactiflux

react-forum

setInterval without destroying it to update state?

PPoppingPopper
View on Discord
10/8/2022
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
Solution:
Looks like the answer I'm looking for is to not read state at all and instead use local values.
Jump to solution
UUUnknown User
View on Discord
10/8/2022
Message Not Public
Sign In & Join Server To View
Solution
PPoppingPopper
View on Discord
10/8/2022
Looks like the answer I'm looking for is to not read state at all and instead use local values.
UUUnknown User
View on Discord
10/8/2022
Message Not Public
Sign In & Join Server To View
Aaprillion
View on Discord
10/9/2022
or read someRef.current from inside an interval

Looking for more? Join the community!

R
Reactiflux

react-forum

Join Server
Want results from more Discord servers?
Add your server
Recommended Posts
devTej – 15-10 Oct 8I read react 18 documentation, that component will render twice for future features. `This featur✅ – Hailwood – 00-51 Oct 7Can someone please help me with some regex - Given strings like ``` "this definitely will not match✅ – Cosec – 16-19 Oct 5how to have a css/js selector using both id and name?✅ – BIOLOGY SCIENCE – 14-32 Oct 5[Audio API] Audio doesn't play when I use createMediaElementSource on an audio element. (more info +✅ – Rhys – 02-32 Oct 5Not really sure how to google this one, is there a shorthand for ternary operators when you write so✅ – Liil' Boo – 16-51 Oct 4Hey, Context & Tech : Working with CSS animations Challenge : retrieve an element's css property v