State
State is best described as how a component's data looks at a given point in time
As a concept from React that is part of Shift, State is used so that a component can keep track of information within its own environment or the wider app environment.
What happens when a component receives data from other components than the parent?
What if the user changes and/or inputs data directly to the component?
To answer this, we have State.
So state is used so that a component can keep track of information in between its renders. When you apply changes to State it updates and re-renders the component.
Imagine a search bar component for example. It will have changes according to user input. Everytime we set a new input in a search bar we want to provide and show the results that match the search to the user. This can be done with State making the component update every time it gets a change in the search bar or just when a button is pressed or trigger it by another input, complete control over the component rendering.
State is not mandatory in every component, just if the component implys changes.
So normally a distinction is made for components that don't have State and therefore are referred as stateless and components that do have it and are known as stateful.
For more on stateless vs stateful or presentational vs container components refer to the Everything as Components section.
In Shift we have a way of expressing state in two different types, Local and Global state.
When we want a component to just deal with state for internal cases like a button change, a toggle, a different filter or a form submission we use Local State, and for when we need different components to communicate each state changes to one another we use Global State.
Local State
When a component handles just the changes which he is responsible for, we are dealing with Local State.
In a button, checkbox or toggle example, the state only needs to be managed inside the component in order to handle user input, change its data and handle rendering. And in this case we will be looking at two useful Local State states. ((couldn't help it))
Default State
The state default values. Once a component is mounted the state is initialised with this values.
Current State
Every update and change will be represented by the Current State, it is also what information which the component will render.
Global State
In order to communicate and maintain State throughout different components Global State joins the fight.
In a example where we want to share data between components that work together but are not parent or child of one another we need to connect this two using Global State.
For better reuse of Global State this is presented with Scopes which are determine which state properties are shared across components.
Scope
Select Type
Map Type
Advanced Map Type
References
- State FAQ - reactjs.org