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.

Practice

1. What is the main purpose of React context in client components?

easy

A. To share data easily without passing props through every component

B. To create new HTML elements dynamically

C. To style components with CSS

D. To handle browser events like clicks and scrolls

Solution

1. Step 1: Understand React context role

   React context allows sharing data across components without manually passing props at every level.

2. Step 2: Compare with other options

   Creating HTML elements, styling, and event handling are unrelated to React context's main purpose.

3. Final Answer:

   To share data easily without passing props through every component -> Option A

4. Quick Check:

   React context = data sharing without prop drilling [OK]

Hint: Context shares data without passing props everywhere [OK]

Common Mistakes:

• Confusing context with styling or event handling
• Thinking context creates HTML elements
• Believing context is for CSS only

2. Which of the following is the correct way to access React context in a client component?

easy

A. const value = useRef(MyContext);

B. const value = useState(MyContext);

C. const value = useContext(MyContext);

D. const value = useEffect(MyContext);

Solution

1. Step 1: Identify the hook for context access

   React provides the useContext hook to access context values inside client components.

2. Step 2: Eliminate other hooks

   useState manages state, useEffect handles side effects, and useRef manages references, none access context.

3. Final Answer:

   const value = useContext(MyContext); -> Option C

4. Quick Check:

   useContext hook = context access [OK]

Hint: Use useContext to read context in components [OK]

Common Mistakes:

• Using useState or useEffect instead of useContext
• Trying to access context without a hook
• Confusing useRef with context access

3. Given this code snippet in a Next.js client component:

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

export default function DisplayTheme() {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
}

What will be displayed if DisplayTheme is rendered without a ThemeContext.Provider?

medium

A. Current theme: undefined

B. Current theme: light

C. Current theme: null

D. Error: Context provider missing

Solution

1. Step 1: Check default context value

   The context is created with default value 'light', so if no Provider wraps the component, this default is used.

2. Step 2: Understand useContext behavior without Provider

   useContext returns the default value when no Provider is found above in the tree.

3. Final Answer:

   Current theme: light -> Option B

4. Quick Check:

   Default context value used without Provider [OK]

Hint: Default context value shows if no Provider wraps component [OK]

Common Mistakes:

• Expecting undefined or null instead of default value
• Thinking it throws an error without Provider
• Confusing default value with null

4. Identify the error in this Next.js client component using React context:

import { createContext, useContext } from 'react';

const UserContext = createContext();

export default function UserName() {
  const user = useContext(UserContext);
  return <div>User: {user.name}</div>;
}

medium

A. UserContext is not wrapped with a Provider, so user is undefined causing error

B. useContext hook is used incorrectly; should pass a string

C. Missing import of React from 'react'

D. Cannot use context inside client components

Solution

1. Step 1: Check context default value and Provider usage

   UserContext is created without a default value and no Provider is shown wrapping UserName, so useContext returns undefined.

2. Step 2: Understand error cause

   Accessing user.name when user is undefined causes a runtime error.

3. Final Answer:

   UserContext is not wrapped with a Provider, so user is undefined causing error -> Option A

4. Quick Check:

   Undefined context value causes error accessing properties [OK]

Hint: Always wrap context consumers with Provider to avoid undefined errors [OK]

Common Mistakes:

• Assuming useContext needs a string argument
• Forgetting to wrap with Provider
• Thinking React import is mandatory in Next.js 13+ client components

5. You want to create a theme toggle in a Next.js client component using React context. Which approach correctly updates the theme value across components?

hard

A. Pass theme as a prop to every component without using context

B. Create ThemeContext with a fixed string; update theme by changing the string directly in components

C. Use useState inside each component separately without context to manage theme

D. Create a ThemeContext with state and provide toggle function via Provider; use useContext to read and update theme

Solution

1. Step 1: Understand state sharing with context

   To update theme globally, context must provide state and a function to toggle it, so all components share and update the same state.

2. Step 2: Evaluate other options

   Fixed string cannot update dynamically; separate useState per component does not share state; passing props everywhere defeats context purpose.

3. Final Answer:

   Create a ThemeContext with state and provide toggle function via Provider; use useContext to read and update theme -> Option D

4. Quick Check:

   Context with state and updater shares dynamic data [OK]

Hint: Use context Provider with state and updater for shared dynamic data [OK]

Common Mistakes:

• Trying to update fixed context value directly
• Using separate state in each component without sharing
• Passing props everywhere instead of using context