You can connect any component you like. There is no hard and fast rule that you can only connect top level components.

While there is a performance hit to connecting top level components and passing the props down I have not witnessed it have a noticeable detrimental effect. The benefit in being able to trace the data through the code is always worth it in my opinion. There is a discussion on it here.


React updates only changed fields

While it's true that render function is called each time you update a book, that doesn't mean that the whole list is re-rendered.

Remember, that in React we are using Virtual DOM. It allows us to update only the elements that are actually changed.

Take a look at this article (it's short and has working code example on codeopen) and this one (a little more detailed)

If you have read those articles, you know that all you need is to inspect your app and see what is actually rendered at each change.


Your second example is almost correct. A mapState function can be declared to take two parameters instead of one. If two parameters are declared, Redux will call that mapState function with the props that were given to the wrapper component. So, the mapState function for a list item would be:

const mapState = (state, ownProps) => {
    const book = state.books[ownProps.index];
    return {book}

My blog post Practical Redux, Part 6: Connected Lists, Forms, and Performance shows some examples of how to do that, and also discusses the key considerations for application performance in Redux.

Related Query

More Query from same tag