This content originally appeared on DEV Community and was authored by menomanabdulla
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.
This content originally appeared on DEV Community and was authored by menomanabdulla
menomanabdulla | Sciencx (2021-10-04T06:08:12+00:00) How I maintain large-scale dataset in react. Retrieved from https://www.scien.cx/2021/10/04/how-i-maintain-large-scale-dataset-in-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.