Introduction to Context API

Hey everyone, today we are going to talk about Context API in react. This article will cover everything about react context API from its need to how to properly use it. Since the introduction of Context API, it has made the life of React developers very easy. In very simple terms I can say that it is used to pass data and manipulate data between various different components in React.

What is Context API?

This is a structured component that is used to pass data among various components, it is a very good and similar alternative to prop drilling. Earlier if we had to pass data from one component then either we have to use pass them as props or we had to use Redux which is a very complicated process. Context API gives a light and easy alternative to Redux.

In the above picture, we have tried to show how the data is being passed from one node to another as we cannot pass data from the parent node to every child, the data will have to flow through several nodes while in context API we store all the data in context and then pass it to every node in the app. Here node represents components in the app. Thus Context API helps to avoid the unidirectional flow of data done by prop drilling and makes it very easy to maintain state.

State Management

In the above portion we have talked about how Context API helps in maintaining state but what exactly is state management? Let's explore.

In all applications, you have to keep the different parts of the UI in sync. Now, what I mean by that is if there is a part of the UI with which the user interacts, there can be a need for the other part of the UI to change accordingly, and in a large application where you might have several components, you will have to write a lot of code to get all this set up. Say that you are making an e-commerce store, where on clicking the add to basket, you want the basket count to go up by one. To make all this possible, you have to maintain the state properly, and this is where the state management tools come in handy.

How to use Context API

The Context API can be used to share data with multiple components, without having to pass data through props manually. For example, in some use cases, the Context API is ideal for theming, user language, authentication, etc.

createContext

To start with the Context API, the first thing we need to do is create a context using the createContext function from React.

The createContext function accepts an initial value, but this initial value is not required.

After creating your context, that context now has two React components that are going to be used: Provider and Consumer.

Provider

The Provider component is going to be used to wrap the components that are going to have access to our context.

The Provider component receives a prop called value, which can be accessed from all the components that are wrapped inside Provider, and it will be responsible to grant access to the context data.

Consumer

After you wrap all the components that are going to need access to the context with the Provider component, you need to tell which component is going to consume that data.

The Consumer component allows a React component to subscribe to the context changes. The component makes the data available using a render prop.

useContext

You might have been using React Hooks for some time now, but if you don’t know yet what React Hooks are and how they work, let me very briefly explain them to you:

React Hooks allow us to manage state data inside functional components; now we don’t need to create class components just to manage state data.

React has a few built-in hooks such as useState, useCallback, useEffect, etc. But the one that we’re going to talk and learn more about here is the useContext hook.

The useContext hook allows us to connect and consume a context. The useContext hook receives a single argument, which is the context that you want to have access to. We can also create a custom hook to easily use the context.

Now let’s take a real-life example and see how everything is working collectively.

In the above example first, we are importing useContext, createContext from react, by the way just to let you know Context API is not a 3rd party library, it is inbuilt in react.

Then we define the context using createContext.

Then we create a function which act as provider,we pass the data through this function.We pass children as parameter and this allow us to pass data to all the child components.We then wrap the main App component with this provider function.

Once we wrap the App component with provider function we can pass data from context to any child component.Now let’s see how we can use the data which is being passed from context.

In the above program we are passing dispatch from the context and use it in the Login function.In the similar Context API can be used to handle many complex problems specially where there is change in view in real-time.

Conclusion

In this article, we learned more about the React Context API. The Context API came to solve a few different problems that we were having in React applications — one of the most important is prop-drilling. We created an example using the Context API in a functional component. Also, we were introduced to how to use the useContext hook.

Thank you for going through the article, I hope now you will be able to use Context with ease.