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. The user interface could look like this:

Figure 10.1: An example user interface

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...