How to lazy load data in React?

Question

React

Essence of the problem:
An array is received, which may contain, for example, 1000 lines. I need to display 100 rows, and then load 100 more rows if the user scrolls the page, and so on until the entire array is displayed.
How to implement it? I googled, but everywhere information about React.lazy comes out, which deals with lazy loading of components to reduce the bundle. If I understand correctly, it's not like that at all.

Answer 1

Add a property to the state that specifies how many elements to show. You also hang a scroll event handler, in which you check scrollTop - if there is nowhere to scroll further, increase the number of displayed elements. For example .

Answer 2

what you are talking about is standard practice. You should for example refer to the API to say the offset and the number of elements you want to load. For example offset 0 and 100 elements. The next step is offset already 100 and elements 100. To the first 100 you will add new ones so you will get your 200 elements when scrolling. Can't find a list to display ? I advise you to take https://github.com/bvaughn/react-virtualized in it you can implement this functionality.