We talked about state back in Chapter 1, Understanding the Fundamentals, and until now we've only had the need for local component state, which we sometimes pass to related components via props. However, with the introduction of our shopping cart feature, we will need to display the same state in multiple components that have no direct relationship with one another. Think about almost any e-commerce website you've ever purchased something from; typically, you'll have a dedicated page for your shopping cart items, as well as some kind of cart summary widget, which will be displayed in the sidebar of every page. These two locations have no direct connection to one another without traversing all the way up the component tree to the very top, to the root level App component.
Do we really need to store our shopping cart state in the App component...