Context-Api

If you have spent any significant amount of time in the React ecosystem, you have likely encountered the infamous “Prop Drilling” problem. It starts innocently enough. You pass a user ID from a parent component to a child. Then that child needs to pass it to a grand-child. Fast forward three months, and your App.tsx looks like a chaotic plumbing schematic where data is leaking through fifteen layers of components that define props they never actually use.

If you’ve been building React applications for a while, you know the feeling: you import a service directly into a component, and everything works great. But six months later, when you try to write a unit test or switch out a data source for a specific environment, you realize you’ve painted yourself into a corner. Your component is tightly coupled to a specific implementation.