Day 24 of 100days of code

Props drilling

Props drilling is the process of passing data from a higher-level component to a lower-level component in a React component tree. This can occur when data needs to pass multiple layers of components, with each intermediate component passing the data down to its children until it reaches the component where it's needed. While props drilling is common in React development, it can lead to issues such as prop pollution, where components receive props they don't use, making the code harder to maintain.

Example:

The NavBar component should display the number of movies (X) found at the top right corner.👇👇👇

So, the NumResults component needs access to the movies array, and we'll have to do a lot of prop drilling to get the movies props to the NumResults component. Let's see how many components we have to pass it through.

The state variable 'movies' is currently inside the MovieList component.👇👇👇

Now I'll try to pass in props to reach the NumResults component and show you how many components I went through.

First, I have to lift the state from the MovieList component to the closest common parent, which in our case is the App component.

Please see the file structure in the React Developer Tools.👇👇👇

Here 👇, the movies state has been lifted up to the App component. However, we also need to pass the movies back as props to the MovieList component so that it can have access to that state variable too. Therefore, we pass the movies to the Main component as props. 👇👇👇

The movies prop is destructured in the Main component. Afterwards, it is passed to the ListBox component as props.👇👇

Now, we destructure this prop in the ListBox component and pass it to the MovieList as props 👇👇

Now it finally reaches the MovieList component.👇👇👇

Note: Most of the components did not need the movies prop; they were just passing it, resulting in prop pollution.

Now we also have to get the state variable 'movies' into the NumResults component, and to do this, we drill through. This is everything in one image from the NavBar component to NumResults .👇👇

Now it shows "Found 3 results" 👇👇

Fixing prop drilling with component composition (Building a layout)

Component composition involves breaking down the UI into smaller, reusable pieces and then combining them to create more advanced user interfaces.👇👇

If we move the NumResult component back into the App component, we won't need to pass props through the NavBar component anymore.

Here, I've made the NavBar reusable by using the children prop, which simplifies our setup. Additionally, I removed the movies prop from the NavBar component because it's no longer needed; now the NumResult component has direct access to its movies state.👇👇👇

Now, in the Main component, we also use the children prop.👇👇👇

So, we're using the children prop here👇👇

Here, the movies prop was also removed from the Main component.👇👇

Now, for the ListBox component👇👇

Using composition to make a reusable box.

The ListBox and WatchedBox components can be created from a reusable component since they are similar.👇👇

This is the reusable Box component.👇👇👇

Now, we render the reusable Box component in the App component, replacing the ListBox and WatchedBox components. However, note that the watched state variable needs to be accessed by the WatchedSummary and WatchedMovieList components. 👇👇👇

So, the watched state has been removed from the WatchedBox component since we no longer have a use for that component, and it has been brought into the App component.👇👇