Context best practices in React - Step-by-Step Execution

Concept Flow - Context best practices

Create Context

↓

Provide Context Value

↓

Consume Context in Child

↓

Use Context Value

↓

Update Context Value (optional)

↓

Re-render Consumers

This flow shows how React Context is created, provided, consumed, and optionally updated to share data across components.

Execution Sample

React

const ThemeContext = React.createContext('light');

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

This code creates a ThemeContext, provides a theme state and updater, and passes it down to child components.

Execution Table

Step	Action	Context Value	Component Rendered	Effect
1	Create ThemeContext	default: 'light'	None	Context object ready
2	App renders with theme='light'	{theme: 'light', setTheme: fn}	App	Provider wraps children
3	Toolbar renders inside Provider	{theme: 'light', setTheme: fn}	Toolbar	Toolbar can consume context
4	User triggers theme change	{theme: 'dark', setTheme: fn}	App re-renders	Context value updated
5	Toolbar re-renders with new context	{theme: 'dark', setTheme: fn}	Toolbar	UI updates to dark theme
6	No more updates	{theme: 'dark', setTheme: fn}	Stable	Rendering stops

💡 Rendering stops when no state or context changes occur

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
theme	'light'	'light'	'light'	'light'	'dark'	'dark'
setTheme	function	function	function	function	function	function
Context Value	{theme:'light', setTheme}	{theme:'light', setTheme}	{theme:'light', setTheme}	{theme:'light', setTheme}	{theme:'dark', setTheme}	{theme:'dark', setTheme}

Key Moments - 3 Insights

Why do we wrap child components with the Provider?

The Provider passes the context value down the tree. Without it, children get the default context value (see Step 2 and 3 in execution_table).

What happens when the context value changes?

All components consuming that context re-render with the new value (see Steps 4 and 5 in execution_table).

Can we update context value from a child component?

Yes, if the updater function is provided in context (like setTheme), children can call it to update context (Step 4).

Visual Quiz - 3 Questions

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

A default 'light' string

B {theme: 'dark', setTheme: fn}

C {theme: 'light', setTheme: fn}

D undefined

💡 Hint

Check Step 3 in the execution_table where Toolbar renders inside Provider

At which step does the theme change from 'light' to 'dark'?

A Step 4

B Step 5

C Step 2

D Step 6

💡 Hint

Look at the 'Context Value' column in execution_table for theme updates

If we remove the Provider, what context value will Toolbar receive?

A The last updated context value

B The default context value

C An error occurs

D null

💡 Hint

Recall Step 1 default context value and Step 3 Provider role

Concept Snapshot

React Context best practices:
- Create context with React.createContext(defaultValue)
- Wrap children with Provider passing value
- Consume context with useContext hook
- Provide updater functions in context to allow changes
- Avoid overusing context to prevent unnecessary re-renders

Full Transcript

This visual execution shows how React Context works step-by-step. First, a context is created with a default value. Then, the App component provides a context value including state and updater function. Child components like Toolbar consume this context to access shared data. When the user triggers a change, the context value updates, causing consuming components to re-render with new data. Wrapping children with Provider is essential to pass the current context value. Without it, children get the default value. Providing updater functions in context allows children to change shared state. This pattern helps share data like themes or user info across components cleanly and efficiently.