title: setState hook not updating - though prevState shows correct value
body: <p>I'm using the state variable to keep track of my previous state.</p>
  <p>The animation works (without index), but when I do</p>
  <pre><code>const [index, setIndex] = useState(0)
  
  useEffect(() =&gt; {
          animation.addListener((scroll) =&gt; {
              setTimeout(function() {
                  let position = Math.floor(scroll.value / cardWidth + 0.75);
                  if (position &gt;= restaurants.length - 1) position = restaurants.length - 1;
                  if (position &lt;= 0) position = 0;
  
                  console.log(&quot;position: &quot;, position, &quot;index: &quot;, index)
  
                  if (index !== position) {
                      setIndex(prevState =&gt; {
                          console.log(&quot;previous: &quot;, prevState, &quot;position: &quot;, position, &quot;index: &quot;, index)
                          return position
                      });
                      const { coordinate } = restaurants[position];
                      mapRef.current.animateCamera({
                          center: {
                              latitude: coordinate.latitude,
                              longitude: coordinate.longitude,
                          },
                           altitude: 2000, // zooms in when viewing specific location
                      }, {duration: 1000}) // not sure if duration is actually doing anything
                  }
              }, 3000);
          });
          return function cleanUp(): void { animation.removeAllListeners(); }
      }, []);
  </code></pre>
  <p>The index never updates. I've tried checking the prevState inside the setState function and that updates, but if I print index outside of setIndex -- it doesn't update. How can I fix this?
  <strong>EDIT: Found the problem. The function never stops as it is always listening. How can I refactor my code to end the function so the state is changed?</strong></p>
  <p>Output from console</p>
  <pre><code>position:  1 index:  0
  previous:  1 position:  1 index:  0
  position:  1 index:  0
  previous:  1 position:  1 index:  0
  position:  1 index:  0
  previous:  1 position:  1 index:  0
  position:  1 index:  0
  previous:  2 position:  2 index:  0
  position:  2 index:  0
  previous:  2 position:  2 index:  0
  position:  2 index:  0
  previous:  3 position:  3 index:  0
  position:  3 index:  0
  previous:  3 position:  3 index:  0
  position:  3 index:  0
  </code></pre>
  <p><strong>EDIT: Answer That I Found</strong></p>
  <p>As many have stated below, useState is asynchronous and will wait for the function to end before updating. The listener is a function that keeps running once it's activated until the next render. Because of this, values only updated when it re-rendered. I decided to switch to useRef as it's synchronous and allowed me to keep the most up-to-date values without re-rendering.</p>