Managing data flow

One of the important principles of React is something called uni-directional data flow.

In the prototypical React app, data is stored in the state of the highest-level component, and passed down to lower-level components via props. When the user interacts with the application, the interaction event is passed up through the component tree via props, until it arrives at the highest-level component, which then modifies the state based on the action.

The application then forms a big circle--data goes down, events come up, and new data goes down. You can also think of it as an elevator, departing from the top floor full of data, and then coming back up full of events.

The advantage of this approach is that it's easy to follow the flow of data. You can see where it's going (to which child components), and why it's changing (in reaction to which events).

Now, this model runs into problems with a complex application with hundreds of components. It becomes unwieldy to store all your...