Menu
I have a component that wraps a bunch of ReactList components. ReactList component is a component that does infinite scrolling ie only load what's on viewport. It has couple of modes: simple and uniform. I'm using simple which just loads and loads as you scroll down (making the scrollable page longer). Uniform loads and removes the above section that is now out of viewport. I tried using uniform mode, and if it worked I wouldn't even need to ask what I'm about to, but it's super buggy and defeats the purpose. Simple on the other hand is super fast scrolling and loading is equally fast.
I broken down my list into few groups where user can click and it will load that ReactList component. If the scrollable page is short, ie, user hasn't scrolled all the way down, changing between the group of lists is fast enough. ~2s. However, if the page is scrolled all the way down, and trying to change list takes ~6s.
I noticed that the page is fully loaded too, ie nothing more to load. So okay, I think maybe if I change the key for the wrapper parent component and just remount the component, it should be fast right? Nope. The component that reloads is short, only one viewport length, but it takes around ~5s.
I noticed changing out of the fully loaded list component page to just regular single line text "Hello world" component still took around the same amount! ~5s. What's up with that?
QUESTION: Why is unmounting a long page with many small components in a list take so long to just unmount?
Sorry I realize this is long and full of text but I thought I should explain my situation.
741
The componentWillUnmount() method allows us to execute the React code when the component gets destroyed or unmounted from the DOM (Document Object Model). This method is called during the Unmounting phase of the React Life-cycle i.e before the component gets unmounted.
All you have to do is remove it from the DOM in order to unmount it. As long as renderMyComponent = true , the component will render. If you set renderMyComponent = false , it will unmount from the DOM. Save this answer.
The componentWillUnmount method is called when the component is about to be removed from the DOM.
You can achieve that changing another property to start the exit transition and check that change in componentWillReceiveProps . Then you can add the 500ms delay and continue to unmount. Save this answer.
As it is an old question, I really want to put it to an end.
Quick answer: use virtual list, something like uniform mode you described, but better maintained with better api. You can get bunch of packages if you search react virtual list, use ones with more stars and better maintained, and most of all fit your case.
Surely you got lots of small components when you scroll. In react it's not like removing a node is one shot thing, it needs to unmount every leaf from the tree, and recursively unmount leaves untuil reach that node. So if you got a lot of components, even today's new react won't help you out.
With virtual list, you get less components although your user doesn't know, so it would be quick.
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
