2020-02-10
2920
#react
Denis Hilt
13694
Feb 10, 2020 â‹… 10 min read

Virtual scrolling: Core principles and basic implementation in React

Denis Hilt JavaScript developer, remote contractor, open source developer.

Recent posts:

Master JavaScript Date And Time: From Moment.js To Temporal

Master JavaScript date and time: From Moment.js to Temporal

JavaScript’s Date API has many limitations. Explore alternative libraries like Moment.js, date-fns, and the new Temporal API.

Yan Sun
Dec 4, 2024 â‹… 9 min read
Npm Vs. Npx: What’s The Difference?

npm vs. npx: What’s the difference?

Explore use cases for using npm vs. npx such as long-term dependency management or temporary tasks and running packages on the fly.

Fimber Elemuwa
Dec 3, 2024 â‹… 5 min read
How To Audit And Validate AI-Generated Code Output

How to audit and validate AI-generated code output

Validating and auditing AI-generated code reduces code errors and ensures that code is compliant.

Boemo Mmopelwa
Dec 2, 2024 â‹… 5 min read
Building A Background Remover With Vue And Transformers.js

Building a background remover with Vue and Transformers.js

Build a real-time image background remover in Vue using Transformers.js and WebGPU for client-side processing with privacy and efficiency.

Emmanuel John
Nov 29, 2024 â‹… 9 min read
View all posts

14 Replies to "Virtual scrolling: Core principles and basic implementation in React"

  1. Nice idea with custom component.. But Just wonder what changes should we do if we want the scroll for whole window not for a scrollable div and elements inside.

    Thanks

  2. Hey! I just made quick demo for the entire window case based on the original approach:

    https://codesandbox.io/s/dhilt-react-virtual-scrolling-entire-window-hr9fc

    I tried to persist basic ideas, but you’ll see some differences:

    – react onScroll event had been replaced with plain old addEventListener of global “window”, and we rely on window.scrollY now;

    – “amount” setting is gone due to window height might be random; now it is calculated as window.innerHeight / itemHeight rounded down; I’m pretty sure, it would be better if we’d change the concept and move to fractional approach, but this is cheaper, more consistent with previous version and still works;

    – class component had been turned into a functional one; this.state and didMount are replaced with useState and useEffect; they are performant, no extra calls.

  3. “`
    // 8) initial height of the bottom padding element (px)
    const bottomPaddingHeight = totalHeight – topPaddingHeight
    “`
    From the name, ‘topPaddingHeight’ and ‘bottomPaddingHeight’ have similar meanings. I think ‘bottomPaddingHeight’ is height of ‘bottom-virtual-rows’. So, bottomPaddingHeight = totalHeight – topPaddingHeight – viewportHeight – 2*toleranceHeight.
    Looking forward to your reply.

  4. I’m trying to put the example (from codesandbox) you provided into my MVC application. First I have to use type=”text/babel” in script tags when I add them into HTML page. Second, when I’m running the site then, I see that it fails with:

    VM3783:3 Uncaught ReferenceError: exports is not defined
    at :3:23
    at i (babel.min.js:24)
    at r (babel.min.js:24)
    at e.src.n..l.content (babel.min.js:24)
    at XMLHttpRequest.n.onreadystatechange (babel.min.js:24)

    Can you please help?

  5. UPD: Solved the issue above. Another question – how can I link the grid to depend on the parent element scroll event, but not the entire window? The grid will be a certain height with a scroll, and when I mouse scroll inside the element, or move the scroll control on the right, then scroll event shall fire.

  6. It looks like a compile error. Don’t know what the infrastructure you are trying to build, I would suggest to look at the configuration on the github repo (link at the top of the article) as it provides pretty common way of compiling and running ReactJS application. The sample has no any additional external dependencies, only React core, so the question could be asked as following: “how to run simplest ReactJS application”.

  7. Just to clarify, why are we copying the settings from the props to the state? I don’t think we are ever setting `settings` state internally, right? Nor would we even in more complex implementations. Thanks!

    1. Agree. Basically, we are initializing state with props, and, there should be copying by value instead of reference, like { settings: { …settings }, … }. This should provide immutability for outer settings. Then we could think on listening for the props.settings change and provide state recalculation.

  8. Hi!
    I’ve implemented this but sometimes when I start scrolling at some point scroll kinda loops and keeps going down and padding keeps growing bigger automatically. Any ideas on what the issue may be?

  9. That’s was great with virtualized DOM in ReactJS. The first i thank you for explain feature so detailed. It seem like if i have a div above virtualized container (i’m using window scroll with your example). And it like loop data when i rendering items. Additional, topPaddingHeight calculates wrong with empty space, which is the same height with a div above. Hope you see my comment :((((

Leave a Reply