React context in client components in NextJS - Step-by-Step Execution

Concept Flow - React context in client components

Create Context

↓

Provide Context Value

↓

Render Client Component

↓

Consume Context with useContext

↓

Component uses context value

↓

UI updates based on context

This flow shows how React context is created, provided, and consumed inside client components to share data without passing props.

Execution Sample

NextJS

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

const ThemeContext = createContext('light');

export default function App() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={theme}>
      <Child />
    </ThemeContext.Provider>
  );
}

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

This code creates a ThemeContext, provides a theme value in App, and Child reads it using useContext to display the theme.

Execution Table

Step	Action	Context Value	Component Rendered	Output
1	Create ThemeContext with default 'light'	light	None	No UI yet
2	App initializes state theme='light'	light	App	No visible output yet
3	App renders ThemeContext.Provider with value='light'	light	App	Provider wraps Child
4	Child component renders, calls useContext(ThemeContext)	light	Child	Reads 'light' from context
5	Child returns <div>Theme is light</div>	light	Child	Displays: Theme is light
6	User changes theme state to 'dark' (not shown in code)	dark	App and Child re-render	Displays: Theme is dark
7	Child reads updated context value 'dark'	dark	Child	UI updates to Theme is dark
8	No more changes	dark	App and Child	Stable UI showing Theme is dark

💡 Execution stops when no more state changes occur and UI is stable.

Variable Tracker

Variable	Start	After Step 2	After Step 6	Final
theme	undefined	light	dark	dark
Context Value	light (default)	light (provided)	dark (updated)	dark

Key Moments - 3 Insights

Why does Child get the updated theme value without props?

Because Child uses useContext to read the current context value provided by ThemeContext.Provider, as shown in execution_table rows 4 and 7.

What happens if we don't wrap Child in ThemeContext.Provider?

Child would get the default context value 'light' from createContext, as in step 1, since no Provider overrides it.

Why must context usage be inside client components?

Because useContext is a React hook that works only in client components, which run in the browser and can respond to state changes, as shown in the example.

Visual Quiz - 3 Questions

Look at the execution table, what is the context value when Child first renders?

A 'light'

B 'dark'

C undefined

D 'default'

💡 Hint

Check Step 4 in the execution_table where Child reads the context value.

At which step does the UI update to show 'Theme is dark'?

A Step 5

B Step 6

C Step 3

D Step 1

💡 Hint

Look at when the theme state changes and components re-render in the execution_table.

If we remove ThemeContext.Provider, what will Child display?

A Error: no context

B 'Theme is dark'

C 'Theme is light'

D Empty output

💡 Hint

Refer to Step 1 and Step 4 in execution_table about default context values.

Concept Snapshot

React Context in Client Components:
- Create context with createContext(defaultValue)
- Wrap components with Context.Provider and pass value
- Use useContext(Context) inside client components to read value
- Updates to Provider value cause consuming components to re-render
- Enables sharing data without prop drilling

Full Transcript

This visual execution shows how React context works in client components using Next.js. First, a context is created with a default value. Then, the App component provides a theme value using ThemeContext.Provider. The Child component consumes this value using the useContext hook. When the theme state changes, the Provider updates its value, causing Child to re-render and show the new theme. This avoids passing props manually and keeps components in sync with shared data.