React Virtualized List - Scroll jumps to top when data updated

[LiorLivyatan]

I have a large amount of updating data that I render with React Virtualized. This data is being updated every ~5 seconds or so. If I scroll down a bit, and the data is being updated - the scroll position jumps back to the top. What I can do to resolve this issue? Thanks a lot! :)

[bacy]

+1

[twihell]

+1

[twihell]

UPD

In my case it was due to extra rerender on the component 'cuz I had a render-if logic:

 if (loading) return <CircularProgress />;

 return <ListComponent  />

So when I was fetching more data, CircularProgress would replace the list, and scrollTop value would reset to 0. But because I was working with the mocked data, it happened so fast I couldn't see the progress component. So basically the solution is to only render a single progress component on the initial data load, and if you want to have some indication for when MORE data is loaded, you can have another boolean state like isNextPageLoading which you could set to true only when you fetch more data onScroll and render another progress component (probably linear progress) together with ListComponent in a single container:

 if (loading) return <CircularProgress />;

 return (
 <>
  <ListComponent  />
  {isNextPageLoading && <LinearProgress />}
 </>
);