How to reduce the number of component re-renders in react?

Question

React

There is an array of news in the amount of 5 pieces that is in the redux store, it is displayed on the page using react, by clicking on the add more button we make a request to the server to get five more news using concat, we combine the old array with the new one that came as response from the server, why when I make a request, the data is redrawn several times, the first time I click on the "Load more" button, the current array is rendered, plus after the data from the server arrives, all objects are rendered again, shouldComponentUpdate did not help, PureComponent slightly improved the situation, the question is how to make it so that when I make a request, only those news that came in response from the server are rendered

Answer 1

Ways to get rid of unnecessary redraws:
1. In the class component, you can implement the shouldComponentUpdate method
2. You can use PureComponent
3. You can wrap the component in a call to connect
4. You can wrap a functional component in a call to React.memo