Infinite Scrolling With React with React-virtualized

  useEffect(() => {
    function onScroll() {
      console.log(
        window.scrollY,
        document.documentElement.clientHeight,
        document.documentElement.scrollHeight
      );
    }

    window.addEventListener("scroll", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
    };
  }, []);

First, let’s find out the footer height!

List Virtualization

How to install

yarn add react-virtualized

GitHub - bvaughn/react-virtualized: React components for efficiently rendering large lists and…

If you want to test performance, Go inspect -> Rendering -> Frame Rendering Stats.

React virtualised vs React Window.

Both libraries were written by the same guy. Both are pretty similar. I will have to deep dive further the differences. In react-virtualized, a component called CellMeasurer is responsible for measuring the dynamic height of the desired element.

• Code before optimisation : 223.28ms
• Code after react-virtualized : 61.42ms

You can see that it takes 0.062seconds before optimization, but takes 223ms (0.223 seconds) after optimization.

You can follow this tutorial to understand better if you prefer videos.

For OXINION, it does not need rowHeight value as its fixed height.

Problems:

• Fixed value for height and width. If you need to handle this, use “CellMeasurer” component that calculate height
• Scroll chaining

WindowScroller component will help you by simply covering.