Learn React Hooks

Introducing React context

React context is used to share values across a tree of React components. Usually, we want to share global values, such as the user state and the dispatch function, the theme of our app, or the chosen language.

React context consists of two parts:

• The provider, which provides (sets) the value
• The consumer, which consumes (uses) the value

We are first going to look at how contexts work, using a simple example, and, in the next section, we are going to implement them in our blog app. We create a new project with the create-react-app tool. In our simple example, we are going to define a theme context, containing the primary color of an app.