CODEWITHSUNDEEP
javascriptreactjsreact-lifecyclevideo-reactjs
AG_HIHI
AG_HIHI

Reputation: 1995

Video-React: handleStateChange gets called multiple times when it should be called only once

I am using Video-React to implement video playing functionality in my project:

 <Player
            ref={(player) => {
              this.state.player = player;
            }}
            src={videoURL}
          ></Player>

I am tracking state change this way:

 componentDidUpdate(prevProps, prevState) {
    if (this.state.player) {
      this.state.player.subscribeToStateChange(
        this.handleStateChange.bind(this)
      );
    }
  }
 
 
  handleStateChange(state, prevState) {
    const userHasJustPlayedVideo = prevState.paused && !state.paused;
    const userHasJustPausedVideo = !prevState.paused && state.paused;

   
    if (userHasJustPlayedVideo) {
      console.group("userHasJustPlayedVideo: PREVIOUS STATE");
      console.log("previous state: ", prevState);
      console.groupEnd();

      console.group("userHasJustPlayedVideo: CURRENT STATE");
      console.log("state: ", state);
      console.groupEnd();
   
    }

    if (userHasJustPausedVideo) {
      console.group("userHasJustPausedVideo: PREVIOUS STATE");
      console.log("previous state: ", prevState);
      console.groupEnd();

      console.group("userHasJustPausedVideo: CURRENT STATE");
      console.log("state: ", state);

      console.groupEnd();
    }
  }

PROBLEM: handleStateChange gets called multiple times when I pause/play video and it follows this pattern.
In other words, the state property paused transitions from true to false or from false to true, and for that ONE STATE TRANSITITON, handleStateChange gets called MORE THAN ONCE and incrementally (See comment below).

  // After I play and pause the 1st time

  // userHasJustPlayedVideo block gets logged 1 time
  // userHasJustPausedVideo block gets logged 2 times

  // After I play and pause the 2nd time
  // userHasJustPlayedVideo block gets logged 2 times
  // userHasJustPausedVideo block gets logged 3 times

  // After I play and pause the 3rd time
  // userHasJustPlayedVideo block gets logged 3 times
  // userHasJustPausedVideo block gets logged 4 times

  // And so on and so forth
  // Everytime there's an extra log
  // It seems that handleChange gets called one extra time
  // Everytime I play and pause
  // Which doesn't make sense

I need to execute some logic ONLY ONCE here:

  if (userHasJustPausedVideo) {
      // LOGIC TO BE EXECUTED ONCE
    }

But, with the current implementation that logic will get execute multiple times.

Any idea what I am doing wrong?

Upvotes: 0

Views: 435

Answers (1)

Adithya
Adithya

Reputation: 1728

I'm guessing that everytime the state updates, you subscribe to state change again. So you are seeing that pattern of behavior.

You are supposed to subscribe to state change in componentDidMount not on componentDidUpdate, so it only registers once.

Check out the subscribeToStateChange(listener) in methods section of the docs

Upvotes: 1

Related Questions