title: Pressing the browser back button undoes my state instead of going back
body: <p>My React website has a video carousel with &quot;Next&quot; and &quot;Prev&quot; buttons used to cycle through the various videos. I save the URL of the current video being displayed in state. That way, when the &quot;Next&quot; or &quot;Prev&quot; buttons are pressed, I just update the state with the appropriate video URL and that video is displayed.</p>
  <p>For some reason, the browser back button now undoes all the state changes one by one before going back to the previous page. So if, for instance, I press &quot;Next&quot;,&quot;Next&quot;,&quot;Next, I would have to press the browser back button 4 times before I'm taken to the previous page. I cannot figure out why, and I have Googled myself blind trying to solve this issue.</p>
  <p>Function that is called when the user presses either of the buttons:</p>
  <pre><code>const changeVideo = (dir) =&gt; {
          let index = movie.videoUrls.findIndex(v =&gt; v === currentVideo)
              //movie.videoUrls contains the URLs of all the videos to be displayed
          if(dir === 'next') {
              if(index === movie.videoUrls.length - 1)
                  setCurrentVideo(movie.videoUrls[0])
              else
                  setCurrentVideo(movie.videoUrls[index+1])
              return;
          }
          if(dir === 'prev') {
              if(index === 0)
                  setCurrentVideo(movie.videoUrls[movie.videoUrls.length - 1])
              else
                  setCurrentVideo(movie.videoUrls[index-1])
              return;
          }
      }
  </code></pre>
  <p><strong>Note:</strong> The video being displayed is a YouTube embed, if that matters.</p>