From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Introduction to prop drilling

Introduction to prop drilling

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Introduction to prop drilling

“

Hello and welcome to lesson number 4. In this lesson, we'll discuss about the prop drilling problem and its possible solutions. Prop drilling is a problem which occurs when we pass on the props to the components which don't need it, in order to deliver it to the recipient component. When we have multiple layers of component hierarchy, and we usually do, we move the props from component A to D where component B and C receive it unnecessarily. It leads to tight coupling of code and making it pretty hard to maintain. Let's understand by an example. In this example, you have four different components. Component A, B, C and D. We are passing a user prop. Component A calls Component B. Component B calls Component C. And finally, Component C calls Component D. In this hierarchy, only the Component D requires the user prop. And that user prop is holding to the component A. It means that component A has a user prop which component D requires. But based on your hierarchy, you have created…

Contents