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.