At this point, we've learned how

components in React communicate with one

another. When a parent needs to send

information down to a child, it does

that through props. This is one of the

core ideas in React. Data flows from

parent to child in a clear, predictable

way. And when multiple components need

the same information, we've also seen

how we can lift the data up to their

closest common parent and then pass it

down through props. This works

beautifully for a lot of use cases and

you will absolutely keep using this

pattern. But as your component tree

becomes deeper and more complex, lifting

data up and passing props through

several layers slowly becomes less

practical. To show you how this happens,

let me start with a simple example.

Imagine we have a dashboard component

that holds some user information. maybe

the user's name, role, and theme

preferences. A header component needs

the user's name to display it in the

navigation. A sidebar component needs

the user's role to determine which menu

items to show based on permissions. We

have two components that need the same

user data. So, we keep the data in the

parent and pass it down as props. This

is the pattern we already know. lift

data up, pass it down. Everything works

perfectly here. But real applications

rarely stay this simple. Let's take this

one step further. Suppose the header

doesn't directly display the user's name

anymore. Instead, it renders a

navigation bar component and that is the

component that actually needs the user

data. Header itself doesn't use the user

prop at all, but it still receives it.

that makes header a pass through

component kind of like a middleman. Now

imagine the tree gets even deeper. The

navigation bar renders a user menu

component and the user menu component

renders an avatar component. Avatar is

the one that finally needs the user's

name. But the user prop has now passed

through three components that don't care

about it at all. They're just carrying

it forward because components lower in

the tree need it. And this still is not

a realistic example. Most dashboards

have multiple branches in a component

tree. So let's bring the whole picture

together. The dashboard still owns the

user data. Header gets it. Sidebar gets

it. Main content gets it. But none of

these components actually need the user

information. Inside header, you have

navigation bar. Then user menu, then

avatar. Inside sidebar you have menu

then menu items. Inside main content you

have settings then preferences and then

theme selector. Only a handful of these

namely avatar menu items and theme

selector ever use the user data. Every

other component is just passing props

through. When you step back and look at

the full component tree, you'll see that

things are messy. Out of 12 components,

eight of them are getting a user prop

they don't even use. They're simply the

path that the data needs to travel

through. This is called prop drilling.

Sending props through layers of

components just to reach the ones that

actually need them. Now, there are two

main problems with prop drilling. First

is maintenance. Every time you need to

add a new property to user, update an

existing one or remove one you no longer

need, you have to touch every single

component in the chain. Consider

something simple like the addition of a

user email. Only the avatar component

cares about the email. But look at what

has to change. Dashboard changes, header

changes, navigation bar changes, and

user menu changes. All because avatar

needs one more field. The deeper your

tree, the more files you need to touch.

The second problem is performance. In

React, if a prop changes in a parent,

every child that receives that prop

rners, even if they don't use the prop.

So, when the user updates, all those

middle components render unnecessarily.

Of course, React doesn't update the DOM,

but it still performs a rerender to

figure out if it needs to. So, the more

you drill, the more wasted work React

has to do. And prop drilling doesn't

just happen with one piece of data. As

your features grow, you often end up

drilling multiple unrelated data sets

through the same components. The prop

lists get longer. The components get

more tightly coupled to things they

don't even use, and the whole system

becomes harder to maintain. Add a new

field, more components need edits.

Remove a field, more clean up. Move a

component around, you break the data

path. There really has to be a better

way to let components access shared data

without dragging every component in the

tree into the process. And the good news

is that React gives us exactly that.

It's a built-in solution designed

specifically to solve this prop drilling

problem. It's called context. And coming

up next, we're going to look at what

context is, how it actually works, and

how it solves the prop drilling problem

we just walked through.