Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In React, data naturally flows down the component tree, from the app's top-level component down to the child components, via props. This is called "unidirectional data flow".
Resources
[MUSIC]
0:00
In a previous course you learned how to
initialize a new state in your components.
0:04
It's important to think carefully about
where state resides in your application.
0:09
Stateful components are powerful, but
0:13
could also bring a lot of
complexity to your app.
0:15
For instance, if you have dozens of
components, each maintaining their own
0:18
state, building and maintaining your
application can become really cumbersome.
0:22
By having to keep track of data
stored in all those components,
0:26
the benefits of using React to
manage state could be lost.
0:29
In React Basics, you learned
about different types of state,
0:32
like application state,
and component state.
0:36
In our scoreboard app, application state
lives in the main app component and
0:39
all of its child components
can be given access to it.
0:44
The counter component has local
state that's not shared or
0:47
visible outside of the component.
0:50
So all of the data we've worked with so
0:53
far should really be
considered application state.
0:55
A player's name, ID, and score state
should be kept together and managed as
0:57
high up in the application as possible so
that all components have access to it.
1:02
In React, data naturally flows down
the component tree from the app's
1:06
top level component down to
the child components via props.
1:12
For example, in the scoreboard, the app
component tells the player component
1:16
all about a player by
passing it a set of props.
1:21
It also instructs the header component
about the total number of players.
1:23
If our data comes from one place, React
will flow any data changes at the top down
1:28
through the component tree,
updating each component.
1:32
This is called unidirectional data flow.
1:36
Currently, our application has
state in a couple of places.
1:39
So up next, we will restructure our state
and data flow to be more unidirectional.
1:42
You need to sign up for Treehouse in order to download course files.
Sign up