Skip to content

Latest commit

 

History

4 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

OBJECTIVE

This project was created to better understand more the virtualization engine react-cool-virtual.

STACK

  • CRA
  • Typescript
  • React Cool Virtual

REFERENCE

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/

WHAT IS

  • 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.

BENEFITS

  • you don't need to pay the cost of thousands of rows of data being rendered at once

HOW TO CALCULATE

  • 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.

HOW IT WORKS

Infinite Scroll

image

HOW IT WORKS ANIMATED

image

About

Repo to better understand the virtualization process

Resources

Stars

3 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages