React - Updating state on timeupdate when using videos with custom controls

Question

I'm implementing a custom video player in a react project. The structure is (simplified):

<VideoContainer> // most outer div, set to fullscreen, etc
  <VideoElement // contains the actual <video> element, gets controlled through the props passed here
    muted={this.state.muted}
    playing={this.state.playing}
    onTimeChange={this.timeChange}
  />
  <Controls>
    <Play
      playing={this.state.playing}                     
      onTogglePlay={this.togglePlay}
    />
    <ProgressBar
      currentTime={this.state.currentTime} // is this ok?
    />
    // ... other controls
  </Controls>
</VideoContainer>

I control everything through the state of the VideoContainer and pass eventHandlers to the controls that need them which works pretty well.

// state of the VideoContainer
this.state = {
  playing: false,
  muted: true,
  currentTime: 0,
  // ...
};

So now to my question:

Is it ok to have the currentTime as part of the state?

I'm afraid that that causes to much state updates and rerender of the VideoContainer. Right now i pass the whole video element to things that needed timeuptates like the progress bar but it would be much more consistent with the rest if i would manage this through the state as well and only pass the currentTime as prop.

Answer 1

Is it ok to have the currentTime as part of the state? yes it is

The VideoContainer element renders whenever the currentTime changes but virtual dom handle this problem and it just rerender progress bar

but if you want optimize it more, its better to handle it your self and don't use state for currentTime.

Answer 2

Is it ok to have the currentTime as part of the state?

Yes, it is ok.

Your <VideoElement /> component won't get re-rendered unless you are internally setting current time state there or if you are not passing some new updated props (as I see you are not doing this)

Moreover, react-media-player would be a good example how video player in React can get a good structure. You will pass updated current time to the upper component and then pass it to your <ProgressBar /> component.