Global State

React state

In the React state, all of the state was held and modified within the same React component, which also happened to be the top-level application component. In most applications, the state will need to be accessed from multiple components, and those components may need to modify the state. How should this state be organized and managed?

As a programming principle, it’s important to avoid having multiple, mutable copies of the same state, because the challenges of keeping them synchronized outweigh any possible advantages. It would be best if you tried to assign each state to a single component and manage the transmission of state information between components, with explicit attention to whether the state is traveling up or down the hierarchy.

State traveling down

State traveling down through the hierarchy is best managed using the mutable state at the high level to determine immutable properties that define the lower-level components. Even when these properties are updated, the lower-level component is updated rather than fully recreated. As a result, the state tracked by the lower-level component will persist unless the component disappears, as could happen with conditional rendering. The following is an example of how the change in a higher-level component is reflected in the lower-level components. Instead, React determines what has changed and updates only that part.

Below, you will be able to see the interactions: