React-window: stateupdate scrolls list to top

Created on 25 Dec 2018  路  3Comments  路  Source: bvaughn/react-window

Hi, I'm using this list to display chat messages (which the variablelist fits well) and I'm wondering why is it that when I get state updates, ie. the user types something, the list scrolls to top.

I'm aware with ref scrollToItem but it's snappy (scrolls to top first, then scrolls to the item, fast). Setting initialScrollOffset to 99999 seems to help but I'm pretty sure I'm doing something wrong here right?

Most helpful comment

Eventually fixed it. My list kept on re-rendering because I was wrapping it in a component similar to react-virtualized's AutoSizer. I ended up un-wrapping it and using the local component state instead to auto-size that part.

I have no idea why it happens but all that matters now is it really works as it should, I can even update message statuses from sent to delivered and the list won't unexpectedly scroll anywhere - very beautiful.

Thank you guys for this component, it's perfect as hell!

All 3 comments

I think this issue is related to yours.
https://github.com/bvaughn/react-window/issues/105

Dang this is crazy, thanks for responding mate.

  1. Could I get away by wrapping it as another component and using shouldComponentUpdate instead?
  2. I got minor state updates like the message statuses like 'sent' and 'delivered', which according to my understanding requires a re-render - could there be a way to at least preserve the scroll position to not affect user experience?

Eventually fixed it. My list kept on re-rendering because I was wrapping it in a component similar to react-virtualized's AutoSizer. I ended up un-wrapping it and using the local component state instead to auto-size that part.

I have no idea why it happens but all that matters now is it really works as it should, I can even update message statuses from sent to delivered and the list won't unexpectedly scroll anywhere - very beautiful.

Thank you guys for this component, it's perfect as hell!

Was this page helpful?
0 / 5 - 0 ratings