Lesson 5: React Context API & Global State

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

createContext(): Creates a new context object.

<Context.Provider value={...}>: Wraps the tree and provides state values to all descendants.

useContext(Context): Hook used by any child component to consume the provided state.

⊞Code Example

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {

const [theme, setTheme] = useState("dark");

const toggleTheme = () => setTheme(t => t === "dark" ? "light" : "dark");

return (

<ThemeContext.Provider value={{ theme, toggleTheme }}>

{children}

</ThemeContext.Provider>

);

}

// Deep child component consuming global context

export function ThemeToggleButton() {

const { theme, toggleTheme } = useContext(ThemeContext);

return (

Current Theme: {theme} (Click to toggle)

</button>

);

}