Context provider in React - Step-by-Step Execution

Concept Flow - Context provider

Create Context

↓

Wrap Provider around children

↓

Provider holds value

↓

Child components access value

↓

Value updates -> Children re-render

This flow shows how a React Context is created, provided to children, and how children consume and react to value changes.

Execution Sample

React

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

const MyContext = createContext();

function MyProvider({ children }) {
  const [value, setValue] = useState('Hello');
  return <MyContext.Provider value={{ value, setValue }}>{children}</MyContext.Provider>;
}

function Child() {
  const { value, setValue } = useContext(MyContext);
  return <button onClick={() => setValue('Hi')}>{value}</button>;
}

export { MyProvider, Child };

This code creates a context, provides a value and updater, and a child button that updates the context value on click.

Execution Table

Step	Action	Context Value	Component Rendered	Effect
1	Create MyContext	undefined	No render	Context object created
2	Render MyProvider with initial state 'Hello'	{ value: 'Hello', setValue: fn }	MyProvider renders children	Provider wraps children with value
3	Child uses useContext to read value	{ value: 'Hello', setValue: fn }	Child renders button with text 'Hello'	Button shows 'Hello'
4	User clicks button	{ value: 'Hello', setValue: fn }	Event triggers setValue('Hi')	State update scheduled
5	State updates to 'Hi'	{ value: 'Hi', setValue: fn }	MyProvider re-renders children	Child re-renders button with 'Hi'
6	Child reads updated context	{ value: 'Hi', setValue: fn }	Child renders button with text 'Hi'	Button shows updated text
7	No further actions	{ value: 'Hi', setValue: fn }	No re-render	Execution stops

💡 No more state changes, context value stable, rendering stops

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 5	Final
value	undefined	'Hello'	'Hello'	'Hi'	'Hi'
setValue	undefined	function	function	function	function

Key Moments - 2 Insights

Why does the Child component re-render when the context value changes?

Because the context provider's value changed at Step 5, React triggers a re-render of all components consuming that context, as shown in execution_table rows 5 and 6.

What happens if the Child component tries to useContext outside of a Provider?

It would receive the default context value (undefined here), so it might render incorrectly or cause errors. This is implied at Step 1 where context is created but no provider wraps children.

Visual Quiz - 3 Questions

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

A 'Hi'

B undefined

C 'Hello'

D null

💡 Hint

Check Step 3 in the execution_table where Child renders with context value

At which step does the context value update to 'Hi'?

A Step 5

B Step 4

C Step 3

D Step 6

💡 Hint

Look at the context value column in execution_table rows for when value changes

If the setValue function was not passed in the provider value, what would happen when Child tries to update?

A Child updates value successfully

B Child cannot update value, no function available

C Context value resets to default

D Provider re-renders automatically

💡 Hint

Refer to variable_tracker showing setValue function presence and execution_table showing update steps

Concept Snapshot

React Context Provider:
- Create context with createContext()
- Wrap children with <Context.Provider value={...}>
- Children use useContext(Context) to access value
- Updating provider value triggers re-render of consumers
- Useful for sharing data without prop drilling

Full Transcript

This visual execution trace shows how React Context Provider works step-by-step. First, a context is created with createContext. Then, a provider component wraps its children and holds a state value and an updater function. The child component uses useContext to read the current context value. When the child clicks a button, it calls the updater function to change the context value. This triggers the provider and all consuming children to re-render with the new value. The variable tracker shows how the context value changes from undefined to 'Hello' initially, then updates to 'Hi' after the button click. Key moments clarify why children re-render on context changes and what happens if useContext is used outside a provider. The quiz tests understanding of context value at different steps and the importance of passing the updater function. This helps beginners see how React Context Provider shares and updates data across components.

Practice

1. What is the main purpose of a Context.Provider in React?

easy

A. To share data with all components inside its tree without passing props manually

B. To create a new React component

C. To handle component state locally

D. To style components globally

Solution

1. Step 1: Understand what Context.Provider does

   It allows sharing data to all nested components without passing props down manually.

2. Step 2: Compare options

   Only To share data with all components inside its tree without passing props manually describes this sharing behavior correctly; others describe unrelated tasks.

3. Final Answer:

   To share data with all components inside its tree without passing props manually -> Option A

4. Quick Check:

   Context.Provider shares data = A [OK]

Hint: Context.Provider shares data down component tree [OK]

Common Mistakes:

• Thinking Provider creates components
• Confusing Provider with state management
• Assuming Provider styles components

2. Which of the following is the correct way to create a context and provide a value in React?

easy

A. const MyContext = React.createContext(); ...

B. const MyContext = React.useContext(); ...

C. const MyContext = React.createProvider(); ...

D. const MyContext = React.createContext(); ...

Solution

1. Step 1: Identify correct context creation method

   React.createContext() is the correct method to create a context.

2. Step 2: Confirm correct usage of Provider

   Provider uses a value prop to share data; Consumer does not accept value prop directly.

3. Final Answer:

   const MyContext = React.createContext(); <MyContext.Provider value={data}>...</MyContext.Provider> -> Option D

4. Quick Check:

   createContext + Provider with value = D [OK]

Hint: Use React.createContext() and Provider with value prop [OK]

Common Mistakes:

• Using React.useContext() to create context
• Trying React.createProvider() which doesn't exist
• Passing value to Consumer instead of Provider

3. Given the code below, what will be rendered inside DisplayUser component?

const UserContext = React.createContext();

function DisplayUser() {
  const user = React.useContext(UserContext);
  return <div>Hello, {user.name}!</div>;
}

function App() {
  return (
    <UserContext.Provider value={{ name: 'Alice' }}>
      <DisplayUser />
    </UserContext.Provider>
  );
}

medium

A. Hello, undefined!

B. Error: useContext must be inside a Provider

C. Hello, Alice!

D. Hello, {user.name}!

Solution

1. Step 1: Check Provider value

   The Provider passes an object with name 'Alice' as value.

2. Step 2: useContext reads the value

   DisplayUser uses useContext to get the user object and accesses user.name which is 'Alice'.

3. Final Answer:

   Hello, Alice! -> Option C

4. Quick Check:

   useContext reads Provider value = B [OK]

Hint: useContext gets value from nearest Provider [OK]

Common Mistakes:

• Assuming useContext returns undefined without Provider
• Thinking useContext returns the whole context object, not value
• Confusing JSX output with raw code

4. Identify the error in the following React code using Context Provider:

const ThemeContext = React.createContext();

function App() {
  return (
    <ThemeContext.Provider>
      <Content />
    </ThemeContext.Provider>
  );
}

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

medium

A. Provider is missing the required value prop

B. useContext is used incorrectly outside Provider

C. ThemeContext should be created with React.useContext()

D. Content component should not use useContext

Solution

1. Step 1: Check Provider usage

   The Provider must have a value prop to supply data to consumers.

2. Step 2: Identify missing value prop

   In the code, <ThemeContext.Provider> lacks value, so useContext gets undefined.

3. Final Answer:

   Provider is missing the required value prop -> Option A

4. Quick Check:

   Provider needs value prop = C [OK]

Hint: Provider always needs a value prop [OK]

Common Mistakes:

• Forgetting to pass value to Provider
• Confusing createContext with useContext
• Thinking useContext can't be inside Provider tree

5. You want to share a user object and a function to update it across many components using React Context. Which approach correctly combines these in a single context provider?

hard

A. Create two separate contexts, one for user and one for setUser; use two Providers

B. Create context with React.createContext(); provide value={{ user, setUser }}; consume with useContext

C. Pass user as value and call setUser directly inside components without context

D. Use useState inside each component instead of context

Solution

1. Step 1: Understand combining data and updater in context

   Context value can be an object holding both user data and setUser function.

2. Step 2: Confirm correct usage

   Providing value={{ user, setUser }} allows any component to read user and update it via setUser.

3. Final Answer:

   Create context with React.createContext(); provide value={{ user, setUser }}; consume with useContext -> Option B

4. Quick Check:

   Combine data and updater in one context value = A [OK]

Hint: Put data and updater together in context value object [OK]

Common Mistakes:

• Creating multiple contexts unnecessarily
• Calling setUser without context
• Using local state instead of shared context