What is global state?

When starting with state management in the React world, we are often not familiar with the different concepts of state.

Often, we just look at state by thinking about the amount of useState or useReducer hooks we have in our components. Then, when the useState or useReducer pattern stops working and we need to share state between more components, we either lift our state to the nearest parent when this state is needed only by the children of that component, or find a common place where this state can exist and be accessible everywhere by all the components we want. This state is often called global state.

Let’s look at an example of what global state can look like in an application. Here, we have a store responsible for managing theme selection, fetching data, and tracking the loading state of this fetching request:

const theme = {
  DARK: "dark",
  LIGHT: "light",
};
export const GlobalStore = () => ...