How to optimize the constant insertion of elements in a component?

Question

React

Hello, I am implementing such an element as a history, that is, just a window at the bottom of the page with a scroll, in which all events are displayed line by line. The specifics of the work is such that there are a lot of events, in theory there are 10 new pieces every second, and if I just make a react component that I will redraw every time new events arrive, won’t this kill the page in terms of speed? For example, if I already have 1000 events in the history, and more and more new ones come, it turns out every second that all 1000 events are redrawn. Is there any trick in React for adding code without redrawing the element? thanks in advance

Answer 1

If you have a request in the parent component, when you update the state, the entire page will be rendered this way.
I would make a request in the event list component so as not to render unnecessary components.
Regarding the display, you can make some kind of infinity scroll so that the elements are displayed only when scrolling through the list. In general, in such cases, pagination on the back is good.