React Global Context React global context is a way to pass and consume data between components in a React application without the need to manually pass props at each level. Instead, we use the . In this article, you will learn how to work with the global context in React and how to pass and consume data using the React hook . If you want to learn more about react, you can check the following To initialize a global context in React and share data between components, follow the steps below: 1. Create the Global Context First, you need to create a global context, for this, use the method of React and pass as a parameter an initial value , the initial value can be of any data type, but usually the good practice is to pass a value and after that, you pass as value to the prop the actual data that you want to store globally. 2. Provide the Global Context Once the Global context is created, you need to wrap the whole application with this context in the property, and as mentioned before you pass a prop called and in this prop, you pass all the data you want to store globally, this value can be of any data type a boolean , a string , an array , an array of objects , etc... 3. Consume the Global Context Finally, use the React hook to call the data provided by the global context, you can use the following syntax to do this , after calling the data, every time you update or change the data it will be updated globally. What Does Global Context Mean in React? In React, provides a way to share data across the components without having to manually send the data by props at each level of the tree. In the above example, if you want to send data from the component to the component by props you first have to pass the data from to and then pass the data from finally to the component, this is very tedious especially when working on a large project. With React's global context, on the other hand, you create a global state context with any kind of data you need and then you can access that data from any component using the hook provided by React, no matter if the component is a direct child of the or not, you can access the data very easily from anywhere on your application. How to apply the Global Context of React in a Project? You can create a global context in a real project very easily, in the next example, we are going to create a fake project step by step and we will use the Global Context of React to save and change the theme color of our application. This project has no functionality other than the button to change the theme color from light to dark and vise versa. To create this project we will use React , Vite.js , and Tailwind for the styles. You can also use the command to initialize your project but you should know that this command is getting deprecated by React, instead, I highly recommend you to use Vite.js to initialize your project, this compiler is very fast, efficient and is one of the favorites of the community. Preview of the project. First, initialize your project. Initialize the project with Initialize the project using Once you have initialized the project, we have to create a few components for our application, we will need three components, the first one is , in this component will create the global context and store the theme of our application, the second one is , in this component we will have the functionality to change the theme from light to dark and vise versa, and the third one is the component, this will contain cards with fake products just to better simulate a real application. App.jsx As mentioned before, in this component we will store the theme of our application, to do so, we need to create a global context, you can use the syntax this syntax uses the React function to initialize a global context, make sure you also add the so you can import this context in others component when you need. After creating the context, you have to wrap the whole application with this context, this will give you access to the data stored in the global context in any other component that is inside the application, you can wrap the application with the syntax. After this, you have to pass to the prop all the data that you want to store globally, in our case, we pass inside an object the theme of our application as well as the function to update it. Navbar.jsx Now, in the component, we can access the data that we store in the Global Context, the theme and the function, to import them inside the component we have to use the React hook and the following syntax: With this syntax, you can access the data stored globally in your application, here we use it to access the theme and also the function that we are going to use to toggle the theme of the application every time the button or is clicked. Finally, we only have to change the styles of our application in the component depending on the value of the theme of our application, light or dark. Cards.jsx To change the style of the application depending on the theme we