Unidirectional Data Flow

[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