Preventing Prop Drilling in React Using Zustand: A Shopping Cart Example

While building React apps, you’ve probably faced a situation where you need to pass props from Parent → Child → Grandchild, even though the intermediate components don’t really use those props. This common issue is called Prop Drilling.

To be more clear, lets understand this with analogy:

You want to send a message (data) to your friend in the next room, but you must pass it through 5 people sitting between you and your friend. Each person passes the note without using it — just relaying it.

This is props drilling : passing data through many components that don’t need it, just so the last one can use it.

🥹 Problem:

• Gets messy with deeply nested components.

• Makes code harder to maintain & scale.

🔮 Background

Recently, I was building a shopping cart feature using GraphQL and Fake Store API. That’s when I ran into the issue mentioned above: prop drilling.

Here is the code snippet for your reference:

This is the Home section where you can see three components defined. Among those three, <Products /> is the component where props drilling is happening.

<Products /> component is passing addToCart function as props to its child. The child is the component called <ProductsList />.

Here is the code snippet of <Products /> component.

As you can see, inside the <Products /> component we have one more component called <ProductsList /> which is again accepting addToCart props and finally inside the <ProductsList /> there is again addToCart being used.

This works perfectly fine as it is a very small project.

But imagine if the application grows - suddenly multiple components across different layers need access to the same function or state. Passing props through each layer quickly becomes messy and harder to maintain.

🧩 Solution

This is where state management like Zustand comes into play. Zustand is a small but powerful state management library for React. Unlike Redux, it has almost no boilerplate. We just create a store and access it from anywhere.

To be more precise

Think of Zustand like a public notice board in your room. Instead of passing notes from one person to another (prop drilling)*, you just pin the note on the board. Now, anyone in the room **(any component)** can walk up, read it, or even update it directly.*

Here is how I fixed props drilling.

Step 1) Created a cartStore

Step 2) Used addToCart directly into ProductsList component

Earlier, the addToCart function was being passed down as a prop from the Products component (parent) into the ProductsList component (child), and ProductsList is where the actual add-to-cart logic was triggered.

But after creating store we could use addToCart into ProductsList directly.

You can refer this github link for more.

Here is the Demo URL.

Thank you for reading.