Frontend technology turns in robust at current decades. Modern web technology now more dynamic, more interactive seems like more realistic then earlier. Business owners want more engaging of user and there is a cold-war among companies to, how provides more realistic feel, more efficient user-experience for potential customers. And here data plays a big game. If we are on frontend side then terms going like how efficiently maintain data at frontend. Today we are going to explore, how productively we could maintain large-scale data-set at frontend.
Pagination:
Pagination is one of conventional and proven way of handling large-scale of dataset. We can reduce pressure from DOM tree by using pagination in large data context. As well as it’s also favorable for makes frontend UI organized and clean. For paginate I use react-paginate npm package. It’ s really highly customizable and super simple to use. For customization it has a large list of props, personally I found it handy for dealing with large-scale data-set.
Infinite-scroll:
Infinite-scroll is more trendy approach of maintain large-scale of data-set at frontend. I love infinite-scroll for its smoothness. Infinite-scroll is a bunch handy for news-feed component for this a large amount if popular platform are using infinite-scroll like facebook, twitter, linkedin most of the social-media platform are using infinite-scroll concept. In react we can use infinite-scroll by a popular package called ‘react-infinite-scroll’. Most interesting things about ‘react-infinite-scroll’ are its size and usability. Super simple to use, with super handy use-case.
Virtualized and Window:
According to react-windows doc:
- React-window reduce the amount of work required to render the initial view and to process updates.
- It reduces the memory footprint by avoiding over allocation of DOM nodes.
React-window is new form of react-virtualized. React-window is smaller and faster than react-virtualized. I would suggest go for react-window instead of react-virtualized for those size, customizability and speed issues.
Last-words:
Thanks for staying till now; I highly appreciate your effort. If you have any suggestion about maintaining large-scale data-set at frontend especially in react please share in comment box so that it will resourceful for others too. If you love this article let me know by your activity. Happy coding.
Top comments (10)
Thanks! I just want to point out that infinite-scroll can by tricky. For instance, in one massive social platform (vk.com) existed bug for a while when there was impossible to scroll to the footer of the page. Newly rendered cards just prevented this 😊
Vova, curious to know how was the bug solved?
Super simple, just allow users to choose. E.g. after two, three or whatever dynamic loads in infinite scroll render a button "load more" or something like this.
Yeah that works, but usually in infinite scroll the user expects the data to load as soon as we get to near of the end of the page.
Any ways cheers.
Oh yeah, sure. There is no silver bullet. If in your app there is nothing below this container with infinite scroll, let be it. But if you want to show some footer with contact info or anything useful, you must take care of this.
For instance, here on the main of dev.to. Let's say you want to copy something from the footer, some link or whatever. This is a truly annoying user experience.
I have same felling though but I believe case depends on use-case. Imagine any feed component like facebook, twitter, dev.to, instagram have pagination, then what about user-experience? =D If we talk about any eCommerce product-page then case is different, we can control the flow by user-event and also there some filter-options too. BTW, there is no BUG in tech all are blessing hahahahaha
Instagram had the same bug. They fixed it by moving footer links to the right sidebar
It's become features now I guess, most of the applications UI arranged this way seems like.
great
Happy to see you love this.