React is "generally" a performant framework.. notice the "" on generally, Yeah that is because at times in react land you do feel very limited beca...
For further actions, you may consider blocking this person and/or reporting abuse
Or alternatively you could’ve used virtual DOMless framework or VueJS where half of the DOM doesn’t get re-rendered just because the cursor was moved…
The reality is that React is outdated and full of idiosyncrasies such as useEffect, useCallback, useMemo (and more incoming with the latest release) just to somehow keep it working. We need to let this dinosaur die so the web can move forward.
There is no DOMless framework on a web browser, it's how the browser works. This problem isn't to do with virtual DOM, it's a problem that needs to be solved with virtualization in all cases due to the number of individual DOM nodes created for a large table.
true
React 19Some version after React 19 should prevent the need foruseMemo()oruseCallback(), so developers don't need to think about those anymore. Besides, the concept of memoization has been around for ages, it requires some thinking but it's not THAT complicated.The newly introduced hooks are of a completely different nature and completely optional. In fact, they're add features for handling form state and promises, things that were long overdue.
It's fine that you have a preference for a different library, but I think React 19 is actually moving things forward here.
Edit: learned that the optimizing compiler for React will be added somewhere after version 19, but it's coming!
Haven't tried the new 19, will give it a go I am playing with some other things at the moment at work I have to work with react 17 so 😅
😂 true but for one page we can't change the stack
Just use Svelte, Solid, Qwik, Vue and stop it with React....why use React with its runtime shipped to browser ? On top of it it's just a lib, no state management, which is nuts , check out Svelte it's almost got everything, transitions, state management, animations...
I’m a svelte fanboy. But using svelte doesn’t magically solve the problem in this post. Yeah re-render is avoided but keeping a crazy amount of nodes in your DOM is problematic. You’ll need virtualized list anyway.
yep!
You are right about most of it but React is still pretty good.
I remember facing this issue on a project and the boss said use intersection observer to hide and show the dom of each row and write the code from scratch...
I did it and it worked... But i know i should have used a library 😅
Yeah the lib is great, but also would be really cool to do it from scratch.
React Virtuoso is a good choice for windowing / virtualization. AG Grid also does virtualization out of the box.
oh didn't know about it thanks for letting me know
question:
i've already try to use virtual list things, for example from 100k item, the component require me to setup how much the height specifically... i think if we use it on fullscreen size table, the height need to be collected from ref, but is there any module to apply the size automatically just like using flex: 1 ?
yeah the package itself provieds a component called as AutoSizer for that purpose.
Pagination can also help here I think, if not needed then this could be a better option.Also It would be great if this dynamic loading of rows can be achieved from scratch as we don't know whether this 'react-window' library offers best performance and optimization.
yeah you are right but pagination was not the requirement here we wanted all the data in one go 😅.
I had to go through similar thing to make my demo work
sliterok.github.io/opfs-demo/
I didn't polish it much, looks like you have to press the init table button 2 times for it to work
Nice !!
Lol 49 seconds, what?! That might be a record.
🥲 not something to be proud of
Whoa 😮
😂😂
So that I cannot apply react-window for pagination right, this case of your blog just use for unlimit scrolling table right?
yep because we didn't wanted pagination.