Is there an option in Javascript, React, or Next JS to optimize loading performance when using the same video resource in different components on different pages on the site (to avoid reloading)? Something like keeping the videos that have been loaded in Memory to not load them again if the layout changes. An example use case could be a full-width list view of multiple videos in one component and a grid overview in another.

const ComponentOne = () => {
  return (
    <div className="container">
      <video className="videoStyle01" autoPlay muted loop>
        // Using the same video src
        <source src="../videos/video_H264.mp4" type="video/mp4" />
      </video>
      <div>Video title</div>
    </div>
  );
};

const ComponentTwo = () => {
  return (
    <div className="container">
      <div>Other Styling Elements and Description</div>
      <video className="videoStyle02" autoPlay muted loop>
        // Using the same video src
        <source src="../videos/video_H264.mp4" type="video/mp4" />
      </video>
    </div>
  );
};