Why re-render the left list (react-redux)?

Question

JavaScript

I am quite new in the field of programming in general, so if this question seems stupid or stupid to someone, please understand and forgive me.
to the point.
I have this simple react application:

link to code and image

github

the goal is this:
when you click on a card in the left list, it is cloned into the right list.

like this

state looks like this:

redux state

there is data - this is an object {} containing a complete list of cards.
there are cards - this is an array [] containing the id of the cards that are displayed in the left list.
there is a deck - this is an array [] to which id cards are added, which should be displayed in the right list.
and the shit is that when you click on the map in the left list, the extra components are re-rendered:

this can be seen with highlight updates

that is, only the right list is updated (card ids are added to it), but all other components are re-rendered.
why was the left list re-rendered if it does not change in any way?
even in diff you can see that only the deck array is changed:

diff

ps somewhere I heard that a component that is connected via connect becomes a pure component by default, and is not updated if an updated value does not come to it. but for some reason it doesn't work for me.
// --------------------
this is what helped: I
deleted the node_modules folder that came by default with create-react-app and wrote npm install.
and everything went right

Answer 1

the cards in the left list are being redrawn because each of them is attached to the redux store. more precisely, Redux wrappers are redrawn, which are Context.Consumer - you probably saw them in React devtools.
the component itself is indeed pure by default, but it works like this: a redux wrapper catches the store change, gets a new store, calls your mapStateToProps , and re-renders the wrapped component with the new props. and after that it executes shouldComponentUpdate from the internal PureComponent, understands that nothing has changed and the wrapped component itself is no longer redrawn.
globally, you should make the card a dumb (presentational) functional component - accept a ready-made card data object for rendering in it, and receive and pass it from the connected list component.