A fundamental concept in React is the idea of "state". The state of a React app is essentially a javascript object that determines how React components will appear in the browser. So the same React components may look and behave differently depending on the state of the application. Any changes to the state will trigger an update, or "re-render", of components that depends on it. The state is convenient because it is one centralized variable from which all changes to the DOM will trickle down. There are two ways that data get handled in React: props and state. Props are read-only, or immutable. A component can only read the props given to it, never change them. That's where state comes in. For any data that's going to change, we have to use state. In React, "state" is the data you want to track in your app. State is what allows you to create components that are dynamic and interactive, and it's the only data that changes over time. The only way React allows you to update a component's state is by using its built-in `setState()` method: ```jsx ``` ## Lifting State Up When two or more components need access to the same state, the state should be moved into their common parent. ## Communicating between Components If data flows down in React, how does a child component counter get information back up to its ancestor component? Instead of passing state to a child component, the parent can pass down a callback function. The callback can communicate events and changes in your data upwards, while data continues to flow downwards. In order to design how data flows upward through the component tree, consider each component and its responsibilities. Since data in React flows downward, a child component has no way to directly communicate to its parent. But React allows for props that are callback functions to communicate data upstream, from a child to a parent. For example, we can write event handlers that manipulate state and pass them down to components as callback functions. When a child wants to indicate that the application state should change, like clicking a button to increment a number, it will execute the callback function and the parent will know what to do to update the data. ## Different types of State One important concept to understand is the different types of state. There are two main types of state to consider when designing a React app: application state and component state. Application state is the main state we typically think about. It's usually the data that's available to the entire app. In a scoreboard app, for example, application state could live in the app component, and all of its child components have access to it. The counter component, however, would probably have state that's not shared or visible outside of the component. It's state would be required just for that component to do its job, like increasing and decreasing the score. This type of state is refered to as local component state.