Default value, nearest provider and overriding
Each badge takes the value of the closest provider above it; the first has none, so it gets the default. In React 19, ThemeContext.Provider is the same object as ThemeContext, which is why both syntaxes behave identically. (The module's last line runs before React's first render, so it prints first.)
Context lets a component make a value available to everything below it without passing props: create it with createContext(defaultValue), provide it with <MyContext value={...}> (React 19) or <MyContext.Provider value={...}> (older code), and read it with useContext(MyContext), which returns the value from the nearest provider above.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Create a UserContext, provide { name: "Asha" } from App, and show Hi, Asha in a Navbar two levels down without passing props.
Make a SizeContext with default "medium". Render three <Box> components: one outside any provider, one inside <SizeContext value="small">, and one inside a nested <SizeContext value="large">. Each box shows its size.
Explain it without notes
What are the three steps to use context? Show the code.
What's the difference between <ThemeContext value> and <ThemeContext.Provider value>?
When does useContext return the default value passed to createContext?
How do nested providers work? Give a real use for overriding a context.
Preview
Console
Nothing logged yet.Expected console output
Provider is the context itself: true
No provider above -> light
Inside dark -> dark
Inside sepia (overrides dark) -> sepia
Older .Provider syntax -> blue
Back in dark -> dark