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?

```ts
  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
```

Looks like the answer I'm looking for is to not read state at all and instead use local values.

or read `someRef.current` from inside an interval