title: How to update state so that my timer will run after video load
body: <p>I am newbie on react. I am bit stuck in problem and need to know some pointers regarding state update.</p>
  <p>PROBLEM: I am making the video on load and add the skip button for removing the video from screen. Video will be played through HTML  under the modal. Problem is my video load in 2 or 3 sec after the page refresh and modal will open prior to load video. I have set the timer from 5 seconds which is in reverse format like 5, 4, 3, 2, 1, skip</p>
  <p>But due to slow/late video load, timer run in background and in front side when video display sometime it sees 3, 2, 1, skip</p>
  <p>What I am looking for is when my video start load then only my timer function trigger.</p>
  <p>I have tried onLoad(), onStart() to update the flag state from false to true and on componentDidMount -&gt; load the page according to the state but not getting luck</p>
  <p>This is my code:</p>
  <pre><code>export default class FullScreenAds extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isFullPageVideoModalEnabled: false,
        timerForVideo: 7,
        isDisabled: true,
      };
    },
    async componentDidMount() {
      const uuid = Math.round((new Date()).getTime() / 1000);
      let getUserSession = localStorage.getItem(&quot;gid&quot;);
      if (getUserSession === null || getUserSession.length &lt; 1) {
        localStorage.setItem(&quot;gid&quot;, uuid);
      }
      this.setState({
        isFullPageVideoModalEnabled: true,
        getSession: getUserSession
      })
      this.startTimer()
    },
    async startTimer() {
      // await sleep(3000);
      this.timer = setInterval(() =&gt; {
        const { timerForVideo } = this.state
  
        if (timerForAds &gt; 0) {
          this.setState(({ timerForVideo }) =&gt; ({
            timerForVideo: timerForVideo - 1
          }))
        }
        if (timerForAds === 0) {
          this.setState({ isDisabled: false })
          clearInterval(this.timer)
        }
      }, 1000)
    }
  
    componentWillUnmount() {
      clearInterval(this.timer)
    }
    render() {
      return (
        // run the modal based on state and load the video
      &lt;video  width=&quot;100%&quot; height=&quot;auto&quot; autoPlay playsInline loop&gt;
          &lt;source type=&quot;video/mp4&quot; src=&quot;video/src/url&quot; /&gt;
      &lt;/video&gt;
      )
    }
  }
  </code></pre>