List of Lists

[sandha6000]

I need to render a list of lists using react-window library to optimize the rendering process by only rendering the list items that are currently in the viewport.The list item is also a react-window list. (Inner list and outer list). Is this approach correct and scalable for my use case?Does it have any Limitation?

[sikhaman]

Hello @sandha6000 I have same task ) and started to experiment on it. here is my code sandbox I think it is pretty ok to use nested lists inside lists. Same as table or grid inside grid like do react-virtualized. I measured performance everything it seems ok. at least for 3000 elements )

[sandha6000]

Thank you @sikhaman .

[thunderfreak]

Hi @sikhaman do you still have the code sandbox? I think the list if expired.

[sikhaman]

@thunderfreak yes I restored it, you can check link above again

[thunderfreak]

Thanks @sikhaman . What I'm trying to do is render a nested list (ie: searchresults but there are 4 types of search results, and each type has multiple matches). Do you know if virtualization can be a suitable solution in this case?

[sikhaman]

Depends also on layout you want to see and amount of results you are expecting. Plus I think it is not necessarily should be lists in the lists. You can solve part of your task by improving UX of the page. Not all should be solved by code, we do frontend right? So my suggestion instead of render LIST inside LIST, when you searching, user portals and create new 1 level list with search results, and you have 4 types, create 4 columns of same component that is just one level virtualized list. Workaround with UI/UX designer as well you can find the solution. Meanwhile I would say have one lists inside another one is ok, but going deep to 3-4 levels more would suck by performance and hard to maintain the code + add new features.

[        item        ]
[        item        ]
[        item        ]
                 [        nested item        ]    ______________________________________________________________________________________________
                 [        nested item        ] => | (search here)                                                                                        
                                                  | Res type 1                             Res type 2                           Res type N              
                                                  | [    search result item    ]     [    search result item    ]    [    search result item    ] |
                                                  | [    search result item    ]     [    search result item    ]    [    search result item    ] |
                                                  | [    search result item    ]     [    search result item    ]    [    search result item    ] |
                                                  --------------------------------------------------------------------------------------------------

Tried to picture what I mean above hope it makes sense to you @thunderfreak