From the course: React: State Management (2019)

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Avoiding the pitfall of prop drilling

Avoiding the pitfall of prop drilling - React.js Tutorial

From the course: React: State Management (2019)

Start my 1-month free trial

Avoiding the pitfall of prop drilling

“

- [Instructor] In almost every app I've worked in, I've seen a pattern like this. And if you're wondering what this is, this is actually just a pared down version of our book app that we've been working with. And to be clear I don't expect you to code anything with me this is just for your reference. So as you can see here props are passed down from component to component to component. Take a look at this update books fun. In the example here we're passing this updateBook function from the parent component to the child component to the grandparent component. But notice that the child component has no use for this prop at all. This is called prop drilling or threading in React and it's actually an anti-pattern. Your component should only have the data it needs to render and nothing more. Let's take a step back and see why prop drilling gets introduced in an application. In these sample components here we can actually render everything in one component like this. It avoids prop drilling…

Contents