How can I prevent refreshing HTML Video element (iFrame as well) on React State Update?

Question

I'm a React noobie.

I'm working on my current project which I use HTML video Element.

I'd like to add chapters to Video by using React state, but when I try, Video Element refreshes and playback location moves to the beginning.

How Can I prevent refreshing Video HTML on React State Update?

Try creating a separate video component and pass URL as a prop. Wrap that in React.memo. Now that component will re-render only when the URL changes. — Mehul Thakkar, Nov 24 '21 at 11:06
This doesn't seem to be related to redux, maybe consider removing that tag from the question. — timotgl, Nov 24 '21 at 16:02

score 2 · Accepted Answer · answered Nov 25 '21 at 06:34

Try creating a separate video component and pass URL as a prop. Wrap that in React.memo. Now that component will re-render only when the URL changes.

const Parent = () => (<div><VideoComponent url={"SOME_URL"}/></div>)


const VideoComponent = React.memo(function MyVideoComponent({url}) {
      // only renders if url have changed!
      return (<video src={url}></video>)
});

How can I prevent refreshing HTML Video element (iFrame as well) on React State Update?

1 Answers1

Linked