The Easy Way to Understanding the React Context API

One problem you face while creating apps with React is managing states. Sometimes you require application-level state so that you can save and access the information you need from any component you want.

There are various libraries available to solve the problem, such as Redux and Flux. But React has its own method of making application level-state, and here’s where the React Context API comes in. It’s built into React, so you do not need to install any external libraries for state management in your app to get things done.

The Context API is the way to start if you want to learn any state management library. Context API is easy and less complex than other state management libraries like Redux. So I’d recommend going for React Context API first before moving on to complex state management libraries.

So let’s see why you need state management:

• If you do not use proper state management in large applications, you will find yourself passing down the data through props all the time.
• Passing data as props all the way down the component works, but can be confusing and is sensitive. If you change a single thing dependent on the prop, you need to change almost everything and this becomes a tedious job.
• Passing data like this is called prop drilling and is never recommended.
• Here you need some state management which would help you manage the data you need and keep it in an application-level state so that you can access the data from the state without prop drilling.

We know that Context API is very important, so let’s see how it works, before getting our hands dirty setting up the Context API.

• The Context API creates a data layer around the main React App, which contains all the data you need in the application-level state. To achieve this, we enclose our App component in a Data Provider component.
• We create a hook so that we can get any data we want from the data layer around the app from any component in the app.
• We have a dispatch function that comes with the hook. Think of it as a gun, we can use it to shoot/dispatch actions and data to the data layer so that we can change the application level state according to the action and data provided.
• An example of the use of Context API is storing the User Authentication data. You might need to save the user details in the application level state so that you can access the data from any state because user data is something you would need in pretty much the entire app.

Now that the concepts of the Context API are clear, let’s get out hands dirty and set it up.

First of all, we will make the Data Layer component, which will be wrapping the entire app so that the state is available to all components. To do that, let’s make a file named DataLayer.js with these contents, we will go through the code just after this.

Let’s see what’s happening in the above code

• We are creating a context using the createContext hook, this is the data layer, but we will wrap it inside a component so that we can use it with simplicity.
• We export a component taking props and children. The children basically mean everything between the start and end of the component in JSX.
• As we said the StateContext is a provider which helps us get the data we need in enclosed components. We also pass in the reducer, which handles the actions and state changes. We will make a reducer very soon.
• Finally, we are creating a hook, which helps us get the states and dispatch actions to the data layer. We can import this hook in any component.

Now that we have our Data Layer ready, let’s make a reducer which will manage all the actions and state. So let’s make a file named reducer.js and have these contents and let’s go through the code.

This code is pretty straightforward, let’s go through what’s happening in this piece of code.

• We are defining an initialState which is the default state when the app loads.
• We are making a reducer that takes the state and action. We need to change the state according to the action type. So we use a switch block to check which action was received and change the state accordingly. You should always make a default block that returns the received state if in case an invalid action is passed.
• We export the reducer.

We now have the Data Layer and reducer ready, now we need to actually use it in our app, so let’s go to index.js, that’s known as the scariest place to be, but this is very easy, so let’s set up the Data Layer so that it encloses the app.

So here’s what we’ve done

• We have imported the DataLayer, reducer, and initialState in the file.
• We have enclosed the App component with the DataLayer and passed in the initialState and reducer in it.

That’s all, the React Context API is all ready to use. To use it we can just get the required data using the useStateValue hook.

For more cool tech stuff, follow me on Instagram at atharvadeosthale. You can also subscribe to my mailing list if you would like to here!

What’s Next?

I’d recommend making some projects which use React Context API. When you are confident using the Context API, you can move on to more complex state management libraries like Redux and Flux. We will also be having an article on Redux and how to use it soon.