How to update an array picked by a selector from Redux so that the component is not completely re-rendered?

Question

React

Good afternoon. I ran into a problem when adding new elements to the array, which is used to create components and render them on the page.

I fetch an array with elements from the server (there are 40 objects in it), then I import it into a component and use it to render child components.

{
    loading ? <Spinner /> : trendingGames.map(game => <GamePreviewItem game={game} key={game.id} />)
}

At the same time, I want to fetch the next array with similar elements when I scroll the page to the end. Tipo scrolled to the footer and an action is initiated that fetches the next array with the next 40 elements. Etc. Well, I want all these fetched arrays to be used to create child components.

And I managed to do this, but when it comes to the next fetch (after scrolling to the very bottom of the page), my array is updated and the component is completely re-rendered, and then it also scrolls back to the very top.

This is how it happens:

https://i.gyazo.com/3ca5dad6c6e34772b8e632b836638f...

That is, when the original array is updated (although it is essentially a new array, because I use [...arr1, ...arr2] destructuring), the page becomes empty, the spinner spins, and then the updated one is rendered. I saw on sites they somehow do that after updating the array, everything is not re-rendered, but just below there are new elements that have been added to the array. And I want to achieve the same effect, but I don’t even know how and what to google.

For the first fetch when entering the page and subsequent fetches when scrolling, I use two different actions (maybe one is needed):

case TrendingActionTypes.FETCH_TRENDING_SUCCESS:
    return {
        ...state,
        trendingGames: action.payload,
        loading: false,
        error: null
    }
case TrendingActionTypes.FETCH_MORE_TRENDING_SUCCESS:
    return {
        ...state,
        trendingGames: [...state.trendingGames, ...action.payload],
        loading: false,
        error: null
    }

That is, I understand why the component is rendered. In fact, she receives a new array every time, so she re-renders the same elements. But how else to do it without a clue. Tried all sorts of crap, like pushing the elements of subsequent arrays into the original one, but that obviously didn't work.

Answer 1

Look towards react-infinite-scroll.
https://www.npmjs.com/package/react-infinite-scroll...