I have a component which runs (automatically) 4 muted videos simultaneously, and beside of it I have webgl running on the background parent component. And problem is that, when I open this 4 video component, mobile device cannot handle downloading and running 4 videos at the same time which leads to page's complete freeze.

And I thought what if render each video element one by one, with delay, so they will not render at once? But couldn't find any approaches to do that in React, need your help.

Code example:

content: [

            {
              videoSource: `${process.env.PUBLIC_URL}/assets/video-1.mp4`,
            },
            {
              videoSource: `${process.env.PUBLIC_URL}/assets/video-2.mp4`,
            },
            {
              videoSource: `${process.env.PUBLIC_URL}/assets/video-3.mp4`,
            },
            {
              videoSource: `${process.env.PUBLIC_URL}/assets/video-4.mp4`,
          ],

return (
  ...
    {content.map((contentItem) => <video ... />)}
  ...
)