A Problem with Cross-Component State
You don't even need to build a highly sophisticated React app to encounter a common problem: state that spans multiple components.
For example, you might be building a news app where users can bookmark certain articles. A simple user interface could look like this:
As you can see in the preceding figure, the list of articles is on the left, and a summary of the bookmarked articles can be found in a sidebar on the right.
A common solution is to split this user interface into multiple components. The list of articles, specifically, would probably be in its own component—just like the bookmark summary sidebar.
However, in that scenario, both components would need to access the same shared state—that is, the list of bookmarked articles. The article list component would require access in order to add (or remove) articles. The bookmark summary sidebar component would require it as it needs to display...
