search

clauderic / react-tiny-virtual-list

A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!
https://clauderic.github.io/react-tiny-virtual-list/
MIT License
2.46k stars 166 forks source link

Rationale for using PureComponent #48

Closed idrm closed 6 years ago

idrm commented 6 years ago

Is there a reason why VirtualList extends PureComponent instead of Component?

In my use case (a checkbox list) I find that I have to re-generate the renderItem prop in order to fool the virtual list into re-rendering itself.

I think it would make more sense to use Component, and let the user decide when and how to "purify" its rendering based on some state change.

Alternately, a pure prop that defaulted to true (in order to keep VirtualList backward compatible) could be added to return a component of the corresponding type.

weaintplastic commented 6 years ago

@idrm I'm having the same issue. As a workaround I added a key property to the VirtualList and assigned it to Date.now() so it will rerender. 

<VirtualList key={Date.now()} ... />
idrm commented 6 years ago

Won't that needlessly unmount/re-mount the list upon each render run of its enclosing component?

clauderic commented 6 years ago

If you want to force the component to re-render, pass it an extra prop such as forceUpdate={shouldComponentUpdate}. You can refer to this section of the README https://github.com/clauderic/react-tiny-virtual-list#common-issues-with-purecomponent.

There's currently an issue around this, as it will cause a React warning, but there is a workaround, see #59.

The solution @weaintplastic mentioned should be avoided, as it will indeed needlessly unmount and re-mount the entire component on each subsequent render of the parent component, which would kill performance and cause it to lose it's current scroll position.