Better Rendering Performance with Virtual Lists

GO TRY OUT STORYBLOK!!! go.learnvue.co...
RESOURCES
DEMO - demos.learnvue...
useVirtualList - vueuse.org/core/useVirtualList/
useInfiniteScroll - vueuse.org/cor...
✅ Join the LearnVue+ Waiting List - learnvue.co
Get early access to videos, exclusive content, interactive code challenges, and more.
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co...
MUSIC
Lukrembo - Animal Friends • lukrembo - animal frie...
Lukrembo - Apricity • (no copyright music) l...
Lukrembo - Bake a Pie • lukrembo - bake a pie ...
Lukrembo - Bored • lukrembo - bored (roya...
Lukrembo - Branch • (no copyright music) c...
Lukrembo - Bread • (no copyright music) j...
Lukrembo - Castle • lukrembo - castle (roy...
Lukrembo - Daily • (no copyright music) c...
Lukrembo - Forest • (no copyright music) l...
Lukrembo - Home • lukrembo - home (royal...
Lukrembo - I Always Love You • (no copyright music) l...
Lukrembo - Imagine • (no copyright music) c...
Lukrembo - Lamp • lukrembo - lamp (royal...
Lukrembo - Marshmallow • lukrembo - marshmallow...
Lukrembo - Night • lukrembo - night (roya...
Lukrembo - Pancake • lukrembo - pancake (ro...
Lukrembo - Picnic • lukrembo - picnic (roy...
Lukrembo - Storybook • lukrembo - storybook (...
Lukrembo - Together • lukrembo - together (r...
Lukrembo - Wine • lukrembo - wine (royal...
Lukrembo - Boba Tea • lukrembo - boba tea (r...
#vuejs #vue #javascript #webdev

[@LearnVue]

Shoot. A lot of yall have mentioned this so it's definitely something I should've included in the video, but. The itemHeight property can also be a function if your elements have different heights. For example, { itemHeight: (index) => index % 2 === 0 ? 500 : 1000 } This still doesn't answer the question yall have about accepting variable text lengths and converting that to heights and tbh I haven't found out a solution that I like for that yet...So if you have ideas, drop a comment

[@AkshaySood1]

Was about to ask the same thing! 😅

[@JulienReszka]

Yea variable height would be a must for example in a list of chat messages

[@supram941g5]

use DynamicScroller from Akryum vue-virtual-scroller

[@AdarshMadrecha]

These kind of step by step tutorials are realy helpful. Keep it up. Awesome content 👍🏻🤠

[@LearnVue]

glad to hear! i want to make both conceptual videos, but also more specific tutorials!

[@jingzheshan]

What happens if the individual item has a random height?

[@AlamKhan-yt9wd]

like facebook posts

[@strategistaow3520]

Looks like it's been two years, and no answer at all

[@soviut303]

Great tutorial. I'll be using this in an upcoming project. One thing I'd like to have seen covered is whether the virtual list can handle variable height content. For example, not every tweet is the same height.

[@LearnVue]

yeah definitely something i want to do too. i'm still looking for the best way to calculate height from the text. but useVirtualList's itemHeight can accept a function like (index) => number so trying to start there.

[@patrickraedler3656]

Just today I was looking for a library to implement infinite scrolling with Vue and didn't find anything that convinced me. This video comes just in time

[@LearnVue]

you're the second person to say this! glad my timing was good on this video haha

[@MuhammadM1998]

Your videos are awesome. Your approach is similar to fireship (which is amazzzzing) but with extra focus on vue (which is more amazzzzzing to me). Thank You!

[@LearnVue]

Love this comment

[@SerpentsHiss]

Thanks for the explanation of what the function actually did, I was banging my head against the wall because I thought it worked differently, as soon as I saw your explanation the fix was apparent.

[@yte50]

Once again you don't disappoint, like the video before watching, and loved it

[@isidorenwaiwu2793]

The algorithm triumphs or am I been monitored😅😅. I am currently building a project at this very moment, where this feature is exactly what I need (14hrs after the video upload). I just am currently taking a small break and happen to come across this tutorial. I have an api that displays about 1460 objects in an array. There is no endpoint to comfortably implement pagination on the api. I have been thinking of a solution and wanted to use indexedDB to store the data and build my pagination around indexedDB. This tutorial just came at the right moment...

[@LearnVue]

the algorithm is getting too good 👀

[@roshanikumbharkar6266]

It really worked for me after I look and try some tutorials, yours is the one that worked. Owe you a lot.

[@anparisu]

Amazing content as always, not sure why your channel is not more popular than it is! Definitely one of the hidden gems for Vue devs.

[@LearnVue]

I appreciate it. Hopefully the community continues to support me and the channel so it can keep growing!

[@oussamaabderrahim9793]

Your tutorials are GOLD ! thank you

[@LearnVue]

💚💚

[@ErickMolina-z8j]

This kind of videos are amazing, super helpful, thank you so much !

[@aliyahjanifahlomondot7049]

i really apreciate your help with dowloanding this software

[@sostheneintamba1446]

Thank you so much this helped a lot!!!! You saved my life

[@happynewyearw]

Thanks for the awesome video! wonder what's the best way to support dynamic item height? just set the item height in useVirtualList comp. the min height of the range of item heights? any suggestion? thanks!

[@DatuPula-v2n]

I tried using this in my app since I am rendering many data. However, it didn't work. Is it possible that the reason is that the scrollable content is a table and not a div? Does that matter or did I just forget to do something?

[@Regeneration1996]

Nice 👌 question can be used for a grid list of cards or card displayed flex, flex direction row and flex-wrap wrap?

[@jonnysongs]

Your vids are so good bro, thank you

[@takacszoltan5689]

thanks for the help it help my every thing i need to install

[@benyaminrmb]

one of the best explanations

[@JannisAdmek]

This is really cool! Can I use this with a regular table as well? I have a table with 65000 items and I only see 10 at a time.

[@Thekjabar]

can anyone tell me why it is not working now and official document says use another package instead how can i use with inertia

[@bm2085]

Thank you, this was really helpful!

[@itsmnthn]

Great one as always

[@LearnVue]

💚

[@reagandesigns6432]

This is very helpful since I am fetching a data from an API with 400+ data. Question, because I am confused on how this would work if the v-for list are in 4 columns?

[@paoloforti8707]

Hi, and thanks for the tutorial. I implemented a virtual list but I have a use case that requires the list to be sortable. Is that possible? I tried to sort the list passed as argument to the useVirtualList composable but the list is not being updated, while using filters works fine and the list gets updated. Am I missing something?

[@ptugul]

Woah, great video mate!

[@June-c2q]

Great video thabbk you Wonder whether there would be a way to wrap the virtual list in a grid.. should try it out

[@LearnVue]

im curious too! let me know how it goes

[@abinnouranas5719]

There is a CSS property (content-visibility : auto) that makes browsers do similar work and do not break document search, safari and firefox are not implementing it yet.

[@LearnVue]

i'm interested to see benchmarks with vue's vdom using content-visibility. also hope it gets more browser support.

[@kirankothandan5529]

I have a question. For example, if the user has millions of data and we are virtualizing the list, which is fine. However, I am curious to know how we should deal with the data. When the scroll hits a particular threshold, we load a new batch of data from the API. Should we concatenate the incoming data to the existing list? This approach may cause performance problems. I'm assuming that if the user scrolls up again, we may need to call the API again to load more data. Please advise.

[@edwinolvera2731]

Worked, thx

[@drisslachaal4293]

thank you so much dude you're a god

[@DanielTames]

Amazing video! thank you very much ❤❤

[@LearnVue]

Thanks for watching ❤️❤️

[@carshoesch]

Does this work for vue2 as well?

[@fenandosabado7185]

yo bro, really thankya. Big respect

[@LearnVue]

Glad it helped

[@iamthe_OBSERVER]

What font did you use when you pulled up the “yarn add @vueuse/core”? 2:12

[@LearnVue]

DM mono 🔥

[@maxavylys3169]

Works well!! DANKEEE

[@jalub014]

Is there a way to implement this for a page mode? Meaning scrolling of the page would use the virtual list without any nested scrollbars?

[@LearnVue]

my demo sets the width to the full screen width. does it still show multiple scrolls for you? scroll bar displays are hard to manage cross-browser and user settings wise - but hiding the scroll bar via css could be an option.

[@jalub014]

@@LearnVue I will have to give it a try. I also need some content to be above and bellow the list for my case - the list is just a part of the page.

[@dbssman]

Nice content as always!

[@A28480]

Great video!

[@Akosiyawin]

It's kinda hard to implement if you have a dynamic height element.

[@pyplacca]

Does this work with horizontal lists?

[@LearnVue]

the useInfiniteScroll can work in any direction, but from what I can find - the useVirtualList composable only goes vertically. but the principles should work the same if you roll your own virtual list logic

[@pyplacca]

@@LearnVue got it. Thanks

[@yt-black7442]

Very helpful

[@leonardmbugua4319]

Amazing video! Very useful

[@LearnVue]

glad you like it :)

[@CGVWEB]

That's amazing! Very useful video. I will surely be implementing that on my Vue apps. Just one question... How would you handle the itemHeight propery if list items could vary in size? Like in the Twitter example some items have 3 lines of text but others only 1, and maybe some have media files. I see that useVirtualList accepts a function for the itemHeight prop and gives me the index of the element. I just don't know how to calculate the height that text would take after wrapping into multiple lines. Do you know how to do that?

[@LearnVue]

hmmm - im not sure about the exact implementation, but i know vue-virtual-scroller had that functionality for vue 2...maybe their source code might give some answers? github.com/Akryum/vue-virtual-scroller/blob/next/packages/vue-virtual-scroller/src/components/DynamicScroller.vue would love to know if you find out a good way to do it

[@CGVWEB]

@@LearnVue I will take a look at it to see what I can find. Thank you very much!

[@StefanIvanov188]

Awesome tutorials! But what if we have dynamic height for list item?

[@alejandrosauqueperez931]

Amazing!

[@AndrewRusinas]

What if item height is dynamic?

[@LearnVue]

hey added a pinned comment talking about this! sorry i missed it in the video though :/

[@bluemesastudios]

Hi - beautiful work! I created a new Vue project and copied the code you provided. I may have done something incorrectly because my code loads all the elements at once : ( I check the inspector, and it does indeed confirm that all the 50 divs exist. So I changed the data parameter to 100, and sure enough, I have 100 divs that are all built and loaded... It may be a configuration issue - I don't know. I'm using Firefox. Do you happen to have a github repo for this? I would be happy to study it. Thanks!

[@bluemesastudios]

I believe this is correctly copied - but I could be mistaken: import { ref } from 'vue' import { useVirtualList, useInfiniteScroll } from '@vueuse/core' const data = ref(Array.from(Array(500).keys(), () => 'Lorem Ipsum')) const { list, containerProps, wrapperProps } = useVirtualList(data, { // Keep 'itemHeight' in sync with the item's row. itemHeight: 96 }) useInfiniteScroll( containerProps.ref, () => { // load more data.value.push(...Array.from(Array(10).keys(), () => 'More Lorem Ipsum')) }, { distance: 10 } ) Item #{{ index }} {{ data }}

[@tumelopetsane5500]

thanks helpful vid

[@SamAlizadeh-w6e]

Tnx nice video

[@ZeyadMohamed-uj5pn]

I have a question? it doesn't work & I'm understand nothing.

[@hongquannguyen8873]

For once, the software is actually really useful

[@barbieroalex]

love it

[@LearnVue]

[@shadkamel362]

that is great

[@manums__]

mine too

[@zlotnytskiy]

reddit developers, add this thing, please 🙏... I know that it is not on vue, but do something similar

[@nandoandrade34]

amazingggggg

[@eelitonmenezes8020]

+sub

[@carlosestebanriosllanos8765]

hahsdhahah good

[@khushhirani9389]

k; nbj

[@luisachaparro8446]

thank you so much dude you're a god

[@alphacraftserver3691]

Works well!! DANKEEE

[@alisson715]

Works well!! DANKEEE