Below are the different types of states that can exist within an application. There are three main types:
1. Local State
Local state pertains to a single component. An example of this would be listening to user input in a field or toggling a “show more details” button. Typically, local state is managed within the component using useState
or useReducer
.
2. Cross-Component State
Cross-component state impacts multiple components. For instance, managing the open/closed state of a modal overlay. While this can also be managed using useState
or useReducer
, it often involves passing state between components via props drilling.
3. App-Wide State
App-wide state influences the entire application, such as themes or user authentication status. Similar to cross-component state, this can be managed using useState
or useReducer
, albeit with the assistance of props drilling.