Creating context in React - Visual Walkthrough

Concept Flow - Creating context

Create Context with React.createContext()

↓

Wrap Components with Context.Provider

↓

Consume Context in Child with useContext()

↓

Child uses shared value from Context

↓

Update Context value triggers re-render of consumers

This flow shows how to create a context, provide a value, and consume it in child components, enabling shared state.

Execution Sample

React

const MyContext = React.createContext('default');

function Parent() {
  return <MyContext.Provider value="hello">
    <Child />
  </MyContext.Provider>;
}

function Child() {
  const value = React.useContext(MyContext);
  return <div>{value}</div>;
}

This code creates a context with a default, provides 'hello' as value, and Child reads and displays it.

Execution Table

Step	Action	Context Value	Component Rendered	Output
1	Create MyContext with default 'default'	'default'	None	No output yet
2	Parent renders and provides value 'hello'	'hello'	Parent	No visible output
3	Child renders inside Provider	'hello'	Child	Renders <div>hello</div>
4	Child calls useContext(MyContext)	'hello'	Child	Reads 'hello' from context
5	Child displays context value	'hello'	Child	Output: hello
6	No further updates	'hello'	None	Execution ends

💡 No more renders or updates, context value stable at 'hello'

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
MyContext	React Context with default 'default'	Same	Same	Same
Context Value	'default'	'hello'	'hello'	'hello'
Child Render Output	None	None	<div>hello</div>	<div>hello</div>

Key Moments - 3 Insights

Why does Child get 'hello' instead of the default 'default'?

Because Parent wraps Child with MyContext.Provider and sets value to 'hello' (see execution_table step 2 and 3). The Provider value overrides the default.

What happens if we remove the Provider wrapping Parent?

Child would get the default value 'default' from MyContext (step 1), since no Provider sets a new value.

Does changing the Provider value update Child automatically?

Yes, if the Provider value changes, React re-renders Child with the new context value (not shown here but implied in step 5).

Visual Quiz - 3 Questions

Look at the execution_table, what is the context value when Child renders?

A 'hello'

B 'default'

C undefined

D null

💡 Hint

Check execution_table row 3 and 4 where Child renders and reads context

At which step does the Provider set the context value?

A Step 1

B Step 2

C Step 4

D Step 5

💡 Hint

Look at execution_table where Parent renders and provides value

If we remove the Provider, what would Child display?

A 'hello'

B Nothing

C 'default'

D Error

💡 Hint

Refer to variable_tracker Context Value at Start and key_moments about default value

Concept Snapshot

Creating context in React:
1. Use React.createContext(defaultValue) to make a context.
2. Wrap components with Context.Provider and set value prop.
3. Use useContext(Context) in children to read value.
4. Provider value overrides default.
5. Changing Provider value updates consumers automatically.

Full Transcript

Creating context in React involves making a context object with React.createContext, which holds a default value. Then, you wrap parts of your app with Context.Provider and give it a value to share. Inside children, you use the useContext hook to read that shared value. If no Provider is present, children get the default. When the Provider's value changes, React updates all consumers automatically. This lets components share data without passing props down many levels.