1
00:00:00,000 --> 00:00:04,391
[MUSIC]

2
00:00:04,391 --> 00:00:09,135
In a previous course you learned how to
initialize a new state in your components.

3
00:00:09,135 --> 00:00:13,194
It's important to think carefully about
where state resides in your application.

4
00:00:13,194 --> 00:00:15,274
Stateful components are powerful, but

5
00:00:15,274 --> 00:00:18,580
could also bring a lot of
complexity to your app.

6
00:00:18,580 --> 00:00:22,410
For instance, if you have dozens of
components, each maintaining their own

7
00:00:22,410 --> 00:00:26,570
state, building and maintaining your
application can become really cumbersome.

8
00:00:26,570 --> 00:00:29,712
By having to keep track of data
stored in all those components,

9
00:00:29,712 --> 00:00:32,640
the benefits of using React to
manage state could be lost.

10
00:00:32,640 --> 00:00:36,432
In React Basics, you learned
about different types of state,

11
00:00:36,432 --> 00:00:39,376
like application state,
and component state.

12
00:00:39,376 --> 00:00:44,012
In our scoreboard app, application state
lives in the main app component and

13
00:00:44,012 --> 00:00:47,234
all of its child components
can be given access to it.

14
00:00:47,234 --> 00:00:50,960
The counter component has local
state that's not shared or

15
00:00:50,960 --> 00:00:53,202
visible outside of the component.

16
00:00:53,202 --> 00:00:55,045
So all of the data we've worked with so

17
00:00:55,045 --> 00:00:57,645
far should really be
considered application state.

18
00:00:57,645 --> 00:01:02,240
A player's name, ID, and score state
should be kept together and managed as

19
00:01:02,240 --> 00:01:06,993
high up in the application as possible so
that all components have access to it.

20
00:01:06,993 --> 00:01:12,033
In React, data naturally flows down
the component tree from the app's

21
00:01:12,033 --> 00:01:16,319
top level component down to
the child components via props.

22
00:01:16,319 --> 00:01:21,162
For example, in the scoreboard, the app
component tells the player component

23
00:01:21,162 --> 00:01:23,990
all about a player by
passing it a set of props.

24
00:01:23,990 --> 00:01:28,472
It also instructs the header component
about the total number of players.

25
00:01:28,472 --> 00:01:32,860
If our data comes from one place, React
will flow any data changes at the top down

26
00:01:32,860 --> 00:01:36,450
through the component tree,
updating each component.

27
00:01:36,450 --> 00:01:39,330
This is called unidirectional data flow.

28
00:01:39,330 --> 00:01:42,720
Currently, our application has
state in a couple of places.

29
00:01:42,720 --> 00:01:47,030
So up next, we will restructure our state
and data flow to be more unidirectional.