React: virtualization for a large amount of comments

Hello! I’ve been working on a rethinking of an existing site which has posts and comments below them (with threads!). Comments amount might reach a huge number (like 5k) and the old site goes straightforward and renders each one in page. That causes some problems: for instance, my browser crashed.

Therefore, I was searching the way I can render huge amounts of data in a tree structure and not suffering from the memory limit.

Possible solutions: react-vtree (doesn’t work because there’s no autoSizer for a tree node)

Example: original, react version (source)
Example of given data: gist

My possible solution is render all comments but by a small portions and add each one when user reaches the end of the page. But I don’t know how to do that :frowning:

That kind of chunked data delivery is sometimes called pagination. Normally, pagination is done via discrete buttons—“next” might refer the user to the next page which shows 50 results, etc. It sounds like you want this to occur automagically.

The good news is it’s been done before. The great news is there’s a React component for it available on npm.

You might have to structure your API in such a way to allow the user to request data in a paginated-like manner, e.g., the first 50 results, the second 50 results, and so forth.

2 Likes

The API is not mine, and they’ll send in a response just a 5k comments data in json :upside_down_face:.
Therefore, I’m not going for these:

I already have my data; I just need to render it as lightweightly for the client as it could be. So, the idea of virtualization is that you don’t need to render stuff that is not on client’s screen; you only need to render them when the client reaches them.

But, anyway, I will make tests how the infinite loader goes on big data and then share here! Thanks for help, @RA80533