[MUSIC]

In a previous course you learned how to initialize a new state in your components.

It's important to think carefully about where state resides in your application.

Stateful components are powerful, but

could also bring a lot of complexity to your app.

For instance, if you have dozens of components, each maintaining their own

state, building and maintaining your application can become really cumbersome.

By having to keep track of data stored in all those components,

the benefits of using React to manage state could be lost.

In React Basics, you learned about different types of state,

like application state, and component state.

In our scoreboard app, application state lives in the main app component and

all of its child components can be given access to it.

The counter component has local state that's not shared or

visible outside of the component.

So all of the data we've worked with so

far should really be considered application state.

A player's name, ID, and score state should be kept together and managed as

high up in the application as possible so that all components have access to it.

In React, data naturally flows down the component tree from the app's

top level component down to the child components via props.

For example, in the scoreboard, the app component tells the player component

all about a player by passing it a set of props.

It also instructs the header component about the total number of players.

If our data comes from one place, React will flow any data changes at the top down

through the component tree, updating each component.

This is called unidirectional data flow.

Currently, our application has state in a couple of places.

So up next, we will restructure our state and data flow to be more unidirectional.