Rendering large lists with react-virtualized or react-window

If you use React and need to display large lists of data efficiently, you may be familiar with react-virtualized. It's a windowing library by Brian Vaughn that renders only the items currently visible in a list (within a scrolling "viewport"). This means you don't need to pay the cost of thousands of rows of data being rendered at once. react-window is a recent rewrite with a focus on being smaller, faster and more easily tree-shakeable.

[SouthernHomeDeck]

Thank you for your easy to understand explanation of React Window, very helpful.

[嘎嘎嘎咻]

Hi, what if my list consists of image/video that does not have fix size, after the image/video render the content will jump, any suggestion on this?

[Freeman]

Hey Addy, thank you very much for this thorough evaluation of both solution, you've just saved me a ton of time :) cheers

[marquezdrums]

I'm getting a double scroll bar - one for the main window and one for my list - any idea how to just have one scroll bar on the entire window? I tried setting the width to window.innerWidth and still get two scroll bars, and a horizontal one for extra fun. I notice in dev tools if I uncheck the height and width properties, I think that might do the trick, but I don't know what values to put in the height and width for the list then.

[Михаил-врн]

What if I have saparate module file with array of objects with info. And I want to add something there like new object with info from input, or remove. So, I just use import to my component, but I can't change my module array, format is .js not json, but I can't do nothing with array from react =(
What I should do?

[alexeymind]

Thank you.
What If I need to group rows, let's say adding a title in a group and separate groups with some margins?
Is it possible with this package?

[sreekar_s]

What about react infinite scroll package? Any difference?

[steamer]

What about WindowScroller? It's not ported in a separate repo?

[mrallenchuang]

@addy where did you get the plugin for the bundle size on vscode?

[TheVirtyoz]

Wtah is the theme do you use for VS Code ?

[Techonsapevole]

Thanks for the explanation, very useful

[徐紫微-xi]

Hi Addy Osmani
, what's name of the vscode extension for showing the size of libraries imported?

[doppelgunner]

hi how do i forloop trhough data and modify values without blocking ui interface?

[robotjeans]

Can you share your repo for the react window version?

[isnanesmen]

Hi! Thanks for great video. Can you give link to github with this project?

[sohammondal]

Can you please share the source code for these?

[ramswarooppoonia]

Hi
Thanks for nice video
I want to know for get list of movies which API you have called can you share with me pls
Hardly requested

[ikurbano]

it all started in 199... can we talk about ipis already?! more pracktical terms?