Demon Tech Roadmap

React

React Context API

The React Context API manages global application state.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

While the `useContext` Hook reads global data, the Context API provides the actual structure to build it. Developers use it to store themes, user login information, or language preferences that the entire application needs to access.

Example

1/* this sets up Context */
2import { createContext } from "react";
3
4export const ThemeContext = createContext("light");
5
6function App() {
7  return (
8    <ThemeContext.Provider value="dark">
9      <MainPage />
10    </ThemeContext.Provider>
11  );
12}

Key Points

`createContext()` initializes the empty portal.
The `Provider` component wraps around child components.
The `value` prop passes the actual data into the portal.
All children inside the Provider can read the global data.

Up Next

Continue your journey with the next topic.

Go to React Router ❯