Prop Drilling in React

Prop Drilling in React: A Common Problem & Its Solution

While working on our React components, we encountered a small issue—dynamically calculating and displaying the number of results in our app. This led us to the concept of prop drilling.

Here's a quick breakdown:

1. Structural Components (e.g., App, NavBar, Main):
   These components provide the layout of the application.

2. Presentational Components (e.g., Logo, NumResults, Movie):
   Stateless components that simply display content passed through props.

3. Stateful Components (e.g., Search, MovieList, WatchedBox):
   Components that manage and maintain state internally.

Now, the problem arose when we needed to pass the movies state from MovieList to NumResults, which was deeply nested. To fix this, we had to lift the state up to the closest parent, the App component, and pass it down through multiple layers of components.

This process of passing props through several layers is called prop drilling. It’s tedious, especially if the data is deeply nested and only needs to be passed down to a specific component. While our solution worked, prop drilling can make your code messy and hard to maintain.

In an upcoming blog post, we'll explore better solutions to this problem—like component composition—to make our code cleaner and more efficient.