Learn how to pass store down as a prop to container components instead of declaring a top-level variable to prepare for easier testing and server rendered applications.
Is it a concern that some components are subscribing to the whole store without using all of the elements in the store? For instance, the Footer is going to ForceUpdate every time a new todo item is added correct? Is this OK because React won't actually trigger an update of the child component because it's props didn't change? Can this cause performance issues if lots of items are being displayed like you mention in your SO answer here?
Yes, this would be a performance concern. You can hand write optimizations in the container components, or you can use connect()
from next lessons that does that for you.
Thanks for replying. So connect automatically determines which part of the state tree to pass down? Or more specifically, the part of the state that gets applied to the props in connect is the only part that is subscribed to?
The components generated by connect()
behave very similarly to those I wrote by hand, but they use setState()
instead of forceUpdate()
and implement a performant shouldComponentUpdate()
optimization which skips rendering if the part of the state selected by mapStateToProps()
has not changed.
Thanks! Thanks for the great tutorial.