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.