How to create an image display queue?

Question

JavaScript

We need to get the url to the image from the backend via the websocket and then show it on the page for 10 seconds. Pictures can arrive in a pack of 10 pieces in a couple of seconds, you need to put them in a queue for display.
How to organize a queue with react? Preferably clean.

Answer 1

A queue with react is no different from a "queue with anything". You can use requestAnimationFrame (EN, in Russian also in Google) + " how to control fps ", or setInterval / setTimeout.
React has nothing to do with it at all, when you write the code to show without it, add this code to the component code and that's it.
---
The algorithm is approximately the following:
1) load the url list
2) start loading pictures using it (standardly, using const img = new Image+ img.onload = ...)
3) put these pictures into a queue (into an array)
4) start showing
You start the show either in the case of loading the first frame and then in the course of loading the rest, or after loading all - it's up to you.