Search code examples
reactjsreact-virtualizedreact-virtuoso

React virtuoso - How it works behind the scenes

Everyone. I'm researching about react-virtuoso. It's a new repository for efficiently rendering large component list. It's pretty new. I'm getting of stuck about how it works. Why react virtuoso can overcome problems of react-virtualized?

Thanks a lot <3.

Solution

  • React virtuoso author here.

    • The project has been around since 2019 and has 6M+ NPM downloads. I would not consider it new, but it is newer than react-virtualized and react-window.

    • It has been specifically designed to overcome the challenges of variable item sizes by using optimized data structures.

    If you're interested into understanding its implementation, you can get acquainted with its internal state management paradigm, urx. From there on, you can read the source code - there are several core features that take care of the sizing and scroll handling.

    Hope this helps.