For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Data Science and Machine Learning - 16 wks
Full-Stack Software Developer - 16w
Search from all Lessons
Curated list of small interactive and incremental exercises you can take to get better at any coding skill.
Curated section of projects to build while learning with simple instructions, videos, solutions, and more.
Guides on different topics related to the technologies that we teach in our courses
Social & live learning
The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.
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, 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 React Js Tutorial To initialize a global context in React and share data between components, follow the steps below:
First, you need to create a global context, for this, use the
createContext() method of React and pass as a parameter an initial value
const LanguageContext = createContext("english"), the initial value can be of any data type, but usually the good practice is to pass a
null value and after that, you pass as value to the prop
value the actual data that you want to store globally.
Once the Global context is created, you need to wrap the whole application with this context in the
Provider property, and as mentioned before you pass a prop called
value 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...
Finally, use the React hook
useContext() to call the data provided by the global context, you can use the following syntax to do this
const data = useContext(NameContext), after calling the data, every time you update or change the data it will be updated globally.
In React, global context 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
App.jsx component to the
SearchEngine.jsx component by props you first have to pass the data from
Navbar.jsx and then pass the data from
Navbar.jsx finally to the
SearchEngine.jsx 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
useContext() hook provided by React, no matter if the component is a direct child of the
App.jsx or not, you can access the data very easily from anywhere on your application.
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
npx create-react-app 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.
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
App.jsx, in this component will create the global context and store the theme of our application, the second one is
Navbar.jsx, 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
Cards.jsx component, this will contain cards with fake products just to better simulate a real application.
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
export const NameContext = createContext(initial value) this syntax uses the React function
createContext() to initialize a global context, make sure you also add the
export 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
value 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.
Now, in the
Navbar.jsx 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
useContext() 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
Light Mode or
Dark Mode is clicked.
Finally, we only have to change the styles of our application in the
Cards.jsx component depending on the value of the theme of our application, light or dark.
To change the style of the application depending on the theme we only have to change the tailwind classes, we can use a ternary conditional expression
if true ? to this : or that to check if the theme has a light value or a dark value, if it has the dark value you put the classes for the dark mode or the classes for the light mode otherwise, to do so, do this with the syntax:
And that's it, now you know how to implement the Global Context of React in your own applications, remember to use this hook to store only small amounts of data so it doesn't affect the performance of your application, you can combine this hook with other React hooks like useReducer to manage your application´s data like an expert.
React's Global Context allows you to share data across the components of an application without the need to pass the data through props at each level, using global context states you can access information from anywhere in your application regardless of whether the component is a direct child of the one that holds that information or not.
If you want to learn more about React and its features I recommend you to visit the react exercises tutorial created by 4Geeks where you will learn much more about React and reinforce your knowledge in this amazing Framework.