react-infinite-scroll-component resets scroll position

Question

I'm using react-infinite-scroll-component with Mantine's Select component, and have come across an issue. Basically whenever new data loads, the scroll bar resets all the way to the top, which as you can imagine is quite annoying in terms of UX.

Does anyone have a clue of why this is happening? While inspecting the DOM, it seems that the infinite scroll component completely re-renders for some reason.

You can see what I mean in this gif:

Answer 1

I'm almost sure that you are using some state for checking. I will give you a real bad example & solution for it.

Bad example which isn't works:

const hasData = !isLoading && postsResp?.content?.length;

{!hasData && (
        <InfiniteScroll
          dataLength={postsResp?.content?.length}
          next={() => getContentFeed(true)}
          hasMore={!postsResp?.last}
          loader={(
            <Skeleton
              variant='text'
              width={120}
              height={24}
              sx={{ margin: 'auto' }}
            />
          )}
        >
          {postsResp?.content?.map((post: Content) => (
            <Post key={`post_${post.uuid}+${Math.random()}`} post={post} />
          ))}
        </InfiniteScroll>
      ) : (
        'No posts'
      )}

And this is a one which works good: I know that you noticed i've moved the check if hasData on other place. I did that because each time this state is updating with new value and react re-render my component. That's why the scroll goes on top each time.

 {(!hasData && !isLoading) && (
        'No posts'

      )}
      <InfiniteScroll
        dataLength={postsResp?.content?.length ?? 0}
        next={() => getContentFeed(true)}
        hasMore={!postsResp?.last}
        loader={(
          <Skeleton
            variant='text'
            width={120}
            height={24}
            sx={{ margin: 'auto' }}
          />
        )}
      >
        {postsResp?.content?.map((post: Content) => (
          <Post key={`post_${post.uuid}+${Math.random()}`} post={post} />
        ))}
      </InfiniteScroll>

The main idea here is to remember to do not update any state according to your infinity scroll which can re-render your component.