Will the DOM elements prebuild be a big performance concern?

[bfang711]

I know the number of total DOM elements upfront, so don't want to use infinite loading mode. However in the preparation for the DOM LONG list, one has to for-loop to generate all the DOM elements, although only several of them being actually rendered while the rest are clustered in a big blank DOM, according to the author of react-infinite. e.g. the sample code given in the manual.

  buildElements: function(start, end) {
        var elements = [];
        for (var i = start; i < end; i++) {
            elements.push(<ListItem key={i} num={i}/>)
        }
        return elements;
    },

I just wonder if the "for-loop" gonna be a performance concern if I have 1M elements in my list. Again, not related to rendering, but just this for-loop to reserve the DOM slots in the long list.

thank you

[bfang711]

I think this related to #138. I am looking for one that can reuse the DOM.
Now the question is that is it possible to give the number of items in the full list, and the elementHeight (which is fixed in my case) and calculate the total scrollable div height (not containerHeight), so that the scrollbar and the scroll can preset correctly without pre-generate all the DOMs.

thank you.

[joshribakoff]

If you have local state from which DOM nodes are generated, why not generate them asynchronously. On the infinite scroll callback, generate some DOM nodes on the fly "just in time", from your local state. If the user never scrolls down, you avoid wasting cycles rendering the DOM nodes they never see.

is it possible to give the number of items in the full list, and the elementHeight (which is fixed in my case) and calculate the total scrollable div height

Of course. Multiply. Am I missing something?

[bfang711]

if I understand you correctly, you suggest to use the onInfiniteLoad() and let user scroll down to the end and load more DOM, is that correct? thank you. 2018-02-10 1:53 GMT-05:00 Josh Ribakoff <[email protected]>:

…

If you have local state from which DOM nodes are generated, why not generate them asynchronously. On the infinite scroll callback, generate some DOM nodes on the fly "just in time". If the user never scrolls down, you avoid wasting cycles rendering the DOM nodes they never see. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#263 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMh_ILmYxsgjZ_EwgRqT0q2Iq8ikcDMRks5tTTzwgaJpZM4R-2Jy> .

[joshribakoff]

If instantiating all your components is expensive then yes instantiate them in batches, during the onInfiniteLoad() callback. The whole promise of react-infinite is it will render only what is in the view. Usually instantiating a component is very cheap, its the render which is slow, which is why react-infinite was made.