Consuming context in React - Step-by-Step Execution

Concept Flow - Consuming context

Create Context

↓

Provide Context Value

↓

Component Tree

↓

Consume Context with useContext

↓

Render with Context Value

This flow shows how React context is created, provided to components, consumed using useContext, and then used to render UI.

Execution Sample

React

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

const ThemeContext = createContext('light');

function DisplayTheme() {
  const theme = useContext(ThemeContext);
  return <div>Theme is {theme}</div>;
}

export default DisplayTheme;

This code creates a ThemeContext with default 'light', then DisplayTheme component consumes it and shows the current theme.

Execution Table

Step	Action	Context Value	Component Rendered	Output
1	Create ThemeContext with default 'light'	light	None	No output yet
2	Render DisplayTheme without Provider	light	DisplayTheme	<div>Theme is light</div>
3	Render DisplayTheme inside Provider with value 'dark'	dark	DisplayTheme	<div>Theme is dark</div>
4	Change Provider value to 'blue'	blue	DisplayTheme	<div>Theme is blue</div>
5	Remove Provider, fallback to default	light	DisplayTheme	<div>Theme is light</div>

💡 Rendering stops after DisplayTheme shows the current context value based on Provider or default.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5
theme	undefined	light	dark	blue	light

Key Moments - 3 Insights

Why does DisplayTheme show 'light' when no Provider is used?

Because the default value 'light' set in createContext is used when no Provider wraps the component, as shown in execution_table step 2.

How does changing the Provider value affect the DisplayTheme output?

Changing the Provider value updates the context value consumed by DisplayTheme, causing it to re-render with the new value, as seen in steps 3 and 4.

What happens if the Provider is removed after being used?

The context falls back to the default value from createContext, so DisplayTheme shows 'light' again, as in step 5.

Visual Quiz - 3 Questions

Look at the execution table, what is the context value when DisplayTheme renders without a Provider?

A 'dark'

B 'blue'

C 'light'

D undefined

💡 Hint

Check execution_table row 2 where no Provider is used.

At which step does DisplayTheme render with the context value 'blue'?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at execution_table row 4 for context value 'blue'.

If the Provider value changes from 'dark' to 'blue', what happens to the theme variable in DisplayTheme?

A It stays 'dark'

B It changes to 'blue'

C It becomes undefined

D It resets to default 'light'

💡 Hint

See variable_tracker column After Step 4.

Concept Snapshot

React context lets components share data without passing props.
Create context with createContext(defaultValue).
Wrap components with Provider to set context value.
Consume context inside components using useContext.
If no Provider, useContext returns default value.
Changing Provider value triggers re-render with new context.

Full Transcript

In React, context allows components to share data easily. First, you create a context with createContext and give it a default value. Then, you wrap parts of your component tree with a Provider that sets the context value. Inside any component, you use the useContext hook to get the current context value. If no Provider is used, the default value is returned. When the Provider's value changes, components consuming the context re-render to show the new value. This example shows a ThemeContext with default 'light'. DisplayTheme component reads the theme and displays it. Without a Provider, it shows 'light'. With Provider value 'dark' or 'blue', it updates accordingly. Removing Provider falls back to default again.