{
  "id": 20212806,
  "title": "Props Drilling in React",
  "url": "https://urgent.news/2026/11/15/props-drilling-in-react",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-15T18:39:36.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/lokesh_a/props-drilling-in-react-d7o"
  },
  "original_language": "en",
  "account": "Props Drilling is a common challenge in React applications when transmitting data from a parent component to a deeply nested child component through multiple intermediate components. This occurs when data is passed through props to reach a component that actually requires it, even if some intermediate components don't need that data.\n\nConsider an example with three components: App, Profile, and User. The App component has a username prop, and the User component needs to display it. However, the User component is nested inside the Profile component. To pass the data, the App component sends the username to the Profile component, which then passes it to the User component. The final output displays \"Welcome, Lokesh\".\n\nThis process of passing data through multiple components is aptly named Props Drilling. While it may be acceptable for small applications, it can lead to several issues in larger applications. These include more code, difficulty in maintaining data flow, and unnecessary props being passed to components that don't use them.\n\nTo avoid Props Drilling, React offers a solution called Context API. With Context API, data can be shared between components without the need to pass props through every intermediate component. To utilize Context API, first, create a context using createContext and then use the Provider to provide the data to intermediate components. The child component can then access the shared data using the useContext hook.\n\nFor instance, in the provided example, Profile doesn't need to receive or pass the username anymore. The User component can directly access the username using useContext(). This eliminates the need for Props Drilling, making the application more manageable and efficient.\n\nContext API can be beneficial for sharing data across multiple components, such as in cases of Dark Mode, Authentication, Shopping Cart, or Language Settings. However, it's not suitable for every situation. For simple parent-to-child communication, traditional props are usually sufficient.",
  "summary": "When building React applications, we use props to pass data from one component to another. But what happens when we need to pass data through multiple components, even when some of those components don't need that data? This is called Props Drilling . Let's understand it with a simple example. 1. What is Props Drilling? Props Drilling happens when we pass data from a parent component to a deeply…",
  "key_points": [
    "Props Drilling occurs when data is passed through multiple intermediate components in React.",
    "User component in the example needed username from App via Profile, illustrating Props Drilling.",
    "Context API provides a solution by allowing data sharing without Props Drilling."
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}