Global State
We'll cover the following
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:
Get hands-on with 1400+ tech skills courses.