Initial item count - Githubissues

developerdizzle / react-virtual-list

Super simple virtualized list React component

http://developerdizzle.github.io/react-virtual-list/

MIT License

617 stars 71 forks source link

Initial item count #19

Closed jordaaash closed 7 years ago

jordaaash commented 9 years ago

This is just a WIP refactoring of your branch. I tried to break it up if you want to cherry pick around it. This should fix the problems with isomorphic rendering I mentioned in the comments on #18 while also avoiding mismatching render checksums by only calling getVirtualItems first from componentDidMount.

jordaaash commented 9 years ago

I'm currently testing a build of this in my isomorphic application, substituting it in for the code from #15

jordaaash commented 9 years ago

I just noticed I'm actually using initialVisibleItems instead of initialVisibleItemCount. The latter is more explicit, but is definitely lengthy.

developerdizzle commented 9 years ago

This looks great, although I would definitely prefer the more explicit initialVisibleItemCount property name. We could probably shorten it to initialItemCount if you'd prefer.

jordaaash commented 9 years ago

initialItemCount sounds good to me (especially since they're not inherently visible, just rendered). Unfortunately, there are actually some problems with this implementation that I started resolving but didn't finish this weekend. I'll update the PR soon, just got busy with a project temporarily.

developerdizzle commented 9 years ago

Sounds good; take your time. I've been busy myself and neglecting this project as it is =/

jordaaash commented 9 years ago

Haha it happens. I'm using the version from #15 with initialItems already in production, so I just need to refactor a bit.

quicksnap commented 8 years ago

Any update with this? Server rendering is a priority for me as well.

quicksnap commented 8 years ago

@jordansexton sorry to bug again--I'm curious if you're still using #15 in production? To save some time I'm going to fork off that and see how it goes.

jordaaash commented 8 years ago

@quicksnap No worries, and sorry for the absentee PR here. I've just been swamped with work...

I do use this in production and have for the last few months. I also merged the latest from here into my fork's master just now to update it.

I will still revise this in line with @developerdizzle's desire to have an initialItem count rather than an array, it's just taking me a while to get around to it.

jordaaash commented 7 years ago

SSR works by setting firstItemIndex/lastItemIndex now, so I'm closing this. I can share my specific implementation (which is based on a heavily cut down version of this library) if desired.

developerdizzle commented 7 years ago

@jordansexton I'd love to see it, at least for my own learning purposes! Also - are you using v2 in production? If so, I'm curious how the new HOC convention has been for you, compared to v1.

jordaaash commented 7 years ago

@developerdizzle This is our full implementation (in production @ https://stylisted.com/stylists).

https://gist.github.com/jordansexton/10cc469c2dbd872585c45ebaf6053a8d

There's obviously a lot of extraneous stuff for immutability, isomorphism, performance optimization, and reuse of many of the mixins and other functions throughout our app.

jordaaash commented 7 years ago

Misc notes:

The architecture is a little abstract, but we use mixins to allow many components to respond to resize and scroll events on the same event listener with throttling.
All of our React component states (and Redux store state and individual props values) have been replaced with Immutable, which has significantly improved performance across the board, but especially with this VirtualList implementation.
Disabling pointerEvents is really useful to prevent jank on hover/touch events on the list, especially on mobile.

jordaaash commented 7 years ago

Overall, I think the HOC architecture is great. I would love to try out a version that uses transformY, which I haven't had time to figure out yet.

developerdizzle commented 7 years ago

Nice, thanks for sharing this! I'm going to have to take some time to parse through it, but I do think things like disabling pointer-events would be great to list as best practices in the README.

jordaaash commented 7 years ago

Sure thing. I got the idea from seatgeek/react-infinite, but just debounced so it doesn't set the component state and cause rerendering, or have to manage timeouts.