Clash Royale CLAN TAG

Cache a 3rd party API call in React

I'm integrating a video component into my page that is inserted and removed from the DOM based off the state of its parent. Whenever the video component is mounted it uses a prop video-id to call the 3rd party API of the video hosting service I'm using, Brightcove, which gives back a blob src for the video and sets up the video player. My component looks something like this:

video-id

Brightcove

src

componentDidMount() {
bc(this.videoRef.current); // brightcove initialization script
const player = videojs(this.videoRef.current);
}

render() {
return (
<video
ref={this.videoRef}
data-video-id={this.props.videoId} >
</video>
);
}


An example of how brightcove videos are loaded is here: https://codepen.io/team/rcrooks1969/pen/JywoKE

My problem is that each time this component gets unmounted and mounted again it has to call the API to setup the the video all over again. I can't only cache the src it returns because the API does more than just fetch the src for the video (see codepen example).

src

src

Does anyone know if there's anyway I can cache an entire DOM element even after its been unmounted or if there's some other way I can avoid calling the API each time?

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.