Avoiding prop drilling in React - Step-by-Step Execution

Concept Flow - Avoiding prop drilling

Parent Component

↓

Pass props down

↓

Child Component

↓

Pass props down

↓

Grandchild Component

↓

Parent Component

↓

Context Provider

↓

Any Nested Component

Prop drilling is when data is passed through many layers of components. Using React Context lets nested components get data directly, avoiding this.

Execution Sample

React

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

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

function Child() {
  return <Grandchild />;
}

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

This code shows a parent providing a theme value via context, and a grandchild reading it directly without props.

Execution Table

Step	Component	Action	Props Passed	Context Used	Rendered Output
1	Parent	Render Parent with ThemeContext.Provider value='dark'	None	Provides 'dark'	<Child /> rendered
2	Child	Render Child	No props passed	No context used	<Grandchild /> rendered
3	Grandchild	Render Grandchild	No props passed	Reads 'dark' from ThemeContext	<div>Theme is dark</div>
4	Exit	Rendering complete	No further props	Context value used by Grandchild	Final output displayed

💡 Rendering stops after Grandchild uses context to display theme without prop drilling.

Variable Tracker

Variable	Parent Render	Child Render	Grandchild Render	Final
props	null	null	null	null
ThemeContext value	dark (provided)	dark (available)	dark (used)	dark
Rendered Output	Child component	Grandchild component	<div>Theme is dark</div>	<div>Theme is dark</div>

Key Moments - 3 Insights

Why doesn't the Child component receive any props?

Because the theme value is provided via Context, Child doesn't need to pass props down, as shown in execution_table step 2.

How does Grandchild get the theme value without props?

Grandchild uses React.useContext to read the value directly from ThemeContext, avoiding prop drilling (execution_table step 3).

What problem does Context solve here?

It avoids passing props through intermediate components that don't use them, simplifying data flow (see concept_flow diagram).

Visual Quiz - 3 Questions

Look at the execution_table, what is the ThemeContext value when Grandchild renders?

A undefined

B "dark"

C "light"

D null

💡 Hint

Check the 'Context Used' column at step 3 in execution_table.

At which step does the Child component render without receiving props?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Look at the 'Props Passed' column for Child in execution_table.

If we removed ThemeContext.Provider, what would Grandchild display?

A An error

B "Theme is dark"

C "Theme is light"

D "Theme is undefined"

💡 Hint

Default context value is 'light' as set in React.createContext('light').

Concept Snapshot

Avoid prop drilling by using React Context.
Create a Context with React.createContext(defaultValue).
Wrap components with Context.Provider to supply value.
Nested components use React.useContext to access value directly.
This skips passing props through many layers.
Simplifies data flow and component structure.

Full Transcript

Prop drilling happens when you pass data through many components that don't need it, just to reach a nested one. React Context helps by letting you put data in a special place (Context Provider) at a high level. Then any nested component can grab that data directly using useContext. This means you don't have to pass props down step-by-step. In the example, Parent provides a theme value 'dark' via ThemeContext.Provider. Child doesn't get or pass any props. Grandchild uses useContext to read 'dark' and shows it. This avoids prop drilling and keeps code cleaner.