I was working on my GitHub Finder project when I noticed an issue. I had fallen victim to prop drilling. In short, prop-drilling is where your application is passing props up and down the component tree. This can cause components to re-render when it is not necessary to, also in large applications, this can have significant performance issues.
However, prop drilling is not always an issue. If we are passing data between 2 or 3 levels of component, it is completely acceptable and will most likely not cause any headaches. It will be easy to trace the flow of data. Once we hit the 5+ levels of components is when to start thinking about a better way to handle this!
Here are a few different ways to handle accessing data without prop drilling:
I think the React Docs has the best one liner when it comes to what the Context API does. “Context provides a way to pass data through the component tree without having to pass props down manually at every level”. Basically, when you use Context in your application, you avoid passing data down the component tree through props while still being able to access the data. Context is mainly used when certain data needs to be accessible by many components at various nested levels.
It is difficult to talk about the Context API without bringing up Redux. Redux labels itself a predictable state container. Redux lets you create a data store and connect any component to the store, no matter where the component is positioned in the Component Tree it can access the store!
Passing props down from one component to another is not a bad thing, however if we over use it, it can have negative effects on our application. I hope you enjoyed this break down, thanks for stopping by!
Top comments (0)