How to make REACT-REDUX re-render only one element?

Question

JavaScript

There is a parent element App. Through connect, he is subscribed to change the entire store.
There is a Todo element. He is also subscribed to change the entire store.
There can be multiple Todo items.
When one of the Todos fires an event, it causes the App and nested Todos (all) to be re-rendered.
How can I make sure that when an event is dispatched, only the Todo that sent it is updated?
All code on codepen
PS see console

Answer 1

Take a look at this React-Redux answer. Which way is correct: call connect ...
In short:

• Get rid of connections that listen to large chunks of the state
  
• Use reselect for state calculations (e.g. when collecting an element from different reducers)
  
• Use connect on elements that need data. There may be many. A list of 1000 connected-elements is faster than a list of 1000 connected-elements with 1m connected-element. Because even PureComponent has its own overhead, and if the child component has not been updated, this does not mean that the react diff algorithm will not process changes in the parent component
  

Answer 2

When the render method is called, this does not mean that the application will be re-rendered. The render method returns a Virtual DOM. The ReactJS engine takes the returned Virtual DOM object, compares it to the previous one, and makes incremental changes, if any.