When Props Started Getting Messy: Learning React Context API

When building React apps, passing props felt simple at first.

But as I started working with more components, it became confusing for me.

Sometimes I had to check where I passed a prop, which component needed it, and whether I was passing it through the right component.

While building Chef Claude, I started wondering how this would work in a much bigger app.

---

When Props Started Getting Messy

When passing props in a small app, it feels easy to manage. But as the app grows, passing props can start to feel messy.

While passing props, I had to keep a few things in mind. Sibling components can't directly pass props to each other. If they need to share state, the state can be moved to their closest common parent and then passed down through props.

Props drilling happens when data is passed through multiple component levels just to reach a component deeper in the tree.

The thing that confused me was knowing when to pass props, where to pass them, and how I should pass them. Sometimes it became difficult for me to track how the data was moving between components.

---

Then I Learned Context API

Then I learned about Context API and understood another way of sharing data between components.

Instead of passing the same data through multiple components, Context lets us share data from a Provider and access it in the components that need it.

Using useContext(), a component can access shared data without passing it through every intermediate component as props.

To understand how it actually works, I built a simple dark and light theme changer. I wanted to see how the data flows and how multiple components can access the same context.

import { createContext, useContext } from "react";

export const ThemeContext = createContext({
  themeMode: "light",
  darkTheme: () => {},
  lightTheme: () => {},
});

export const ThemeProvider = ThemeContext.Provider;

export default function useTheme() {
  return useContext(ThemeContext);
}

The thing that clicked for me was actually very small.

A small change in className was changing the theme of the entire page.

I didn't need to write a bunch of code for every component. The theme was shared through Context, and the components could use it where needed.

That's when Context API finally started making sense to me.

---

When I Would Still Use Props

After learning Context API, I understood that it doesn't mean I should stop using props.

If I only need to pass data from a parent to one child component, setting up Context doesn't make much sense to me. Props are already simple enough for that.

I would use Context when the same data needs to be shared across multiple components and passing it through several component levels starts getting messy.

For me, it is not about replacing props with Context.

It's about knowing when props are enough and when shared data needs a better place.

---

Final Takeaway

Before learning Context API, I often got confused about where state should live and how props should move between components.

Learning Context helped me understand that I don't always need to pass shared data through every component.

Props still have their place, and Context isn't a replacement for them. For me, the important part was learning when to use each.

Did you also struggle with passing props when learning React? When did Context API finally click for you?