What is global state?

In developing React applications, one of the key aspects that requires special attention is state management. We are already familiar with the useState hook, which allows us to create and manage state within a component. This type of state is often referred to as local, and it is very effective within a single component and very simple and easy to use.

For a clearer illustration, consider an example with a small form component, where we have two input elements and have created two states for each input:

Figure 12.1: Form component with local state

In this example, everything is simple: the user enters something into the input, which triggers an onChange event, where we usually change our state, causing a full re-render of the form, and then we see the result of the input on the screen.

However, as the complexity and size of your application increase, there will inevitably be a need for a more scalable and flexible approach to state management...