title: Video pausing unexpectedly when video `onTimeUpdate` event is called (with React Hooks)
body: <p><strong>CODE</strong></p>
  <p>This is the video element:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;video
        ref={videoRef}
        onDurationChange={onSetVideoDuration}
        onTimeUpdate={onSetVideoTimestamp}
        width=&quot;100%&quot;
        controls
      &gt;
  </code></pre>
  <p>The function <code>onSetVideoTimestamp</code> is the one used to set the <em>video timestamp state</em> when changes:</p>
  <pre class="lang-js prettyprint-override"><code>  const onSetVideoTimestamp = (event: SyntheticEvent&lt;HTMLVideoElement, Event&gt;) =&gt; {
      const timestamp = event.currentTarget.currentTime
      setVideoTimestamp(Math.floor(timestamp))
    }
  </code></pre>
  <p>and this is how <code>videoTimestamp</code> and <code>setVideoTimestamp</code> are declared:</p>
  <pre class="lang-js prettyprint-override"><code>const [videoTimestamp, setVideoTimestamp] = useState(0)
  </code></pre>
  <p><strong>WHAT IS WORKING</strong></p>
  <p>Basically, the above code <em><strong>works</strong></em>, which means the timestamp state is correctly set.</p>
  <p><strong>THE PROBLEM</strong></p>
  <ul>
  <li><p>The problem is that the timestamp state is constantly updated since the video is playing and it is causing the video to always pausing and unpausing. The video reproduction in conclusion is not fluid.</p>
  </li>
  <li><p>Another issue is that if I set to update the state every 60 seconds, with this code:</p>
  </li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>  const onSetVideoTimestamp = (event: SyntheticEvent&lt;HTMLVideoElement, Event&gt;) =&gt; {
      if(event.currentTarget.currentTime &gt; videoTimestamp + 60) {
         const timestamp = event.currentTarget.currentTime
         setVideoTimestamp(Math.floor(timestamp))
      }
    }
  </code></pre>
  <p><em>STILL</em> the video pauses and unpauses - in that single moment - after 60 seconds of video are played.</p>