Using context for global state

After learning how to use React Context to implement themes in our blog app, we are now going to use a context to avoid having to manually pass down the username and setUsername props. The user state is a global state, which means it is used across the whole app. It also does not change frequently. As such, it is a good candidate for using a context. Like we did before, we start by defining the context.

Defining the context

To define the context, we need to use the createContext function again. In this case, we set the default value to an array with an empty string and a no-op function (a function that does nothing). Later, when defining the provider, we will provide this array by using the result from the State Hook. Remember, the State Hook returns an array like this: [value, setValue].

Now, let’s get started defining the context:

1. Copy the Chapter05_1 folder to a new Chapter05_2 folder by executing the following command...