I have a component that wraps a bunch of ReactList components. The ReactList component is a component that does infinite scroll, i.e. only loads what is displayed in the viewport. It has several modes: simple and homogeneous. I use a simple one that just loads and loads when scrolling down (which makes the scrollable page longer). Unify loads and delete the above section, which now leaves the viewport. I tried using a single mode, and if it worked, I didn’t even need to ask what I was going to, but this is super buggy and defeats the target. On the other hand, simple fast scrolling and loading are equally fast.
I have broken my list down into several groups where the user can click and he will load this ReactList component. If the scrollable page is short, i.e. The user did not scroll all the way down, changing between groups of lists quickly enough. ~ 2s. However, if the page scrolls to the end, and trying to change the list takes ~ 6 s.
I noticed that the page is fully loaded, i.e. do not upload anything else. So, I think, maybe if I change the key for the parent component of the shell and just mount the component, should it be fast? Nope. The component that reboots is short, has only one viewport length, but takes about ~ 5 seconds.
I noticed that plain text text was changing from a fully loaded component list page. The Hello world component still took about the same amount! ~ 5 sec What's up with that?
QUESTION: Why does it take so long to unmount a long page with many small components in the list to just turn it off?
Sorry, I understand that this is a long and complete text, but I thought I should explain my situation.
source share