This project was created to better understand more the virtualization engine react-cool-virtual
.
- CRA
- Typescript
- React Cool Virtual
https://blog.logrocket.com/how-to-virtualize-large-lists-using-react-window/
https://material-ui.com/pt/components/data-grid/virtualization/
https://github.com/bvaughn/react-window
https://www.youtube.com/watch?v=QhPn6hLGljU&ab_channel=AddyOsmani
https://github.com/wellyshen/react-cool-virtual
https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/
- rendering concept that focuses on tracking the user’s position and only committing what is visually relevant to the DOM in any given scroll position.
- It provides us with all the benefits of pagination along with the UX of infinite scrolling.
- you don't need to pay the cost of thousands of rows of data being rendered at once
- We pre-calculate the total height of our list using the dimensions of the given list items
- and multiplying it by the count of our list items.
- then, we position the items to create a list that the user can scroll through.
Infinite Scroll