Before diving deep into React Context, first let’s see why do we need React Context, what is React Context, and many other questions that striking your brain.

Suppose we have an E-commerce app, as shown below.

This is just a basic e-commerce model, now make sure that App is the complete project, and Auth, Shop and Cart are the direct children of App, then LoginForm is child of Auth of component and Product is the child of Shop component.

So first we analyze why we need React Context API. So suppose we have a customer, who wants to login and add some products to card and make a purchase, but for that we need to make sure he logins and all other components should know that the user is logged in, in order to place an order.

So we will be requiring the login info in shop component to enable Add Item Button and then in the cart component so as add the items to cart so basically we need something like in the below model.

As you can see the arrows, these arrows signifies that we require login info from Auth Component to Product Component in order to activate the Add Item Button and to the cart as well. But as you can see that there is no direct connection between these components, so we will use what is called as “prop-chaining” or “prop-drilling”.

That is we will pass say isLogged prop from LoginForm to Auth, Auth passes it to APP Component, and then a chain forms. APP will pass these props to Shop and Cart Components (as shown below).

This is thus resulted in chaining, and there is nothing wrong in doing these, and can be used to understand the concept of “props-chaining”. But it useful only for small basic apps, when your app is large, doing this will neither be efficient nor beneficial in any form. It might result in very high complexity and a very slow running app.

So until here, we have used local state to manipulate props and variables and pass information. But what is if someone told you, that there exist a global state within React, where you can add and retrieve anything and that will be accessible to all the Components in an App. Yes, exactly then why would we require props-chaining. We would login info into global state and then retrieve that info into required Components. This is where React Context API steps in.

So in React Context, what we do is we make a file named Context.js, which will store the initial state of the variable, and then we will use createContext() method from React, it will create a new context. After that we will wrap the App Component with that context by importing it in the App.js Component as shown below.

App.js File

This way we can access, the isLogged variable anywhere within the components that are wrapped with AuthContext.Provider. For example;

Here : and ? operator are conditional operator. This means if isLogged is True then condition after ? is executed and if not then condition after : is executed.

Here make sure to use Provider with AuthContext because without that, the context will not be used. Secondly the above code is just a pseudocode and might not work for a real project, but it is easy to understand React Context using that.

So you might be thinking can this be used only on App.js, or how many context can we have in one Application.

So no, it is not mandatory to use context API only on App.js, you can use it on any component, but make sure that the global state you create can only be used by that component or it’s children components and no one else.

Secondly there can exist as many Global state as you want, but that will result in a lot of mess, and a very slow working app and usually not recommended. It’s a good practice to use React Context API on App.js as it is the root component in an application, just like a root node in a Tree.

This is it for this article, next time we will dive deep into React Context API and Redux 🤩🤩🤩🤩.

Still have questions about Lifecycle methods? Ask in the comments below! Don’t forget to visit my Youtube channel for Leetcode problem solutions. Link is mentioned below. 👇🏻👇🏻👇🏻👇🏻👇🏻

Youtube: https://www.youtube.com/channel/UCD_Al-U9pUeQOXDkhYc_otg