⚛️ Creating Context

⚛️ Introduction

In this lesson, we’ll learn how to create and initialize Context in React. Context provides a way to share data across components without passing props manually.

Creating a Context is the first step before providing or consuming data in the component tree.

? What is Context?

A Context acts as a global data store that can be accessed by any component, no matter how deeply nested.

Created using React.createContext()
Returns an object with two components: Provider and Consumer
Commonly used for themes, authentication, language, or user settings

? Step 1: Create the Context

? View Code Example

// ThemeContext.js — creating a context with a default value
import React from "react";

const ThemeContext = React.createContext("light");

export default ThemeContext;

The default value (“light”) will be used if no Provider is present higher in the component tree.

? Tip: It’s a good practice to define each context in its own file for better modularity.

? Step 2: Create a Context Provider

A Provider wraps components and passes the context value to all of them.

? View Code Example

// ThemeProvider.js — providing state through context
import React, { useState } from "react";
import ThemeContext from "./ThemeContext";

function ThemeProvider({ children }) {
const [theme, setTheme] = useState("light");

return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
}

export default ThemeProvider;

This ThemeProvider component holds the shared state and provides it to all nested components.

? Step 3: Wrap Your App with the Provider

? View Code Example

// App.js — wrapping the application with ThemeProvider
import React from "react";
import ThemeProvider from "./ThemeProvider";
import Toolbar from "./Toolbar";

function App() {
return (
<ThemeProvider>
<Toolbar />
</ThemeProvider>
);
}

export default App;

Now, every component inside ThemeProvider can access the shared theme context.

? Step 4: Consume Context

Components use the useContext() hook to access the shared value from Context.

? View Code Example

// Toolbar.js — consuming context using useContext
import React, { useContext } from "react";
import ThemeContext from "./ThemeContext";

function Toolbar() {
const { theme, setTheme } = useContext(ThemeContext);

return (
<div>
<p>Current Theme: {theme}</p>
<button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
Toggle Theme
</button>
</div>
);
}

export default Toolbar;

Here, useContext() directly gives access to the data from ThemeContext without passing props.

? Understanding Default Values

? View Code Example

// Default value used when no Provider exists
const MyContext = React.createContext("Default Value");

If no provider is used, the components consuming this context will receive "Default Value".

? Interactive Demo (Context Concept)

This interactive example simulates how a shared value (like Context) affects multiple components at once.

Shared Theme Value: light

All components read the same shared value.

? Summary

Step	Description
1️⃣ Create Context	Use `React.createContext()` to make a new context object.
2️⃣ Provide Context	Wrap components with `Context.Provider` to share data.
3️⃣ Consume Context	Use `useContext()` to access shared data in components.
4️⃣ Default Value	Used when no provider is found in the component tree.

? Tips

Use separate files for each Context to keep your app organized.
Use clear naming like ThemeContext or UserContext.
Combine with useReducer() when state logic becomes complex.

? Try This

Create a LanguageContext that switches between English and Hindi.
Display the selected language in a header component.
Use a button to toggle the language globally using Context.

Goal: Understand how to define and provide shared data using React Context effectively.