Say goodbye to Prop Drilling with Contexts
Here we are again my dear same 10 people who read my articles, I’m back with another react article. This time it’s on using contexts as a solution for prop drilling. All right before we drill down deep (yeah, pun intended) into the subject, just like in all of my articles a little back story on why and how I ended up using contexts.
The major focus in our SEF dev team for last few weeks was on developing a platform to make ScholarX mentor/mentee registration and selection process automated. So in the frontend, as we let users sign in to the platform all the views should render in a specific way for each user, depending on all the programs that particular individual is enrolled or applied to and the specific roles he or she is taking in each program. As I analysed the full requirement of the platform I realized that though most of the scenes do depend on the user object we receive when a user logs into the platform there are some views we can generalize over every user.
The basic way in react to do this is to get the user object in a component in the higher part of the component hierarchy, most of the time in the root component, and pass down the user object as a prop to the child components where a conditional rendering depending on the user object is needed. The problem in using this way is if a child component of component that does not depend on the user object does depend on the user object we have to pass the user object to the parent component just so that it can pass the object down to the child. Let me illustrate that in a graphical way. (Yeah, yeah, the last sentence is kind of complex, but you don’t have to mention it)
I think this healthy component family made it clear for you why this prop drilling is not a good way to pass down necessary objects. Intermediate components keep asking ‘Why can’t you give it yourself?’. Well, that’s where contexts come in handy.
First, we have to create a context using createContext and export it.
Note: Make the object that you have to use as an interface in the firsthand if you are using typescript otherwise just ignore the <Parital<User>> part.
Then wrap all the components in UserContext.Provider and pass in the user object that you need to use down in the component tree to the prop value.
Now you can import the userContext in any child component of SomeOtherComponent or AnotherComponent and use useContext method to get the passed in user object.
Now all the intermediate components are happy and AnotherComponentsChild Component got what it needed without bothering any parent components to hold props that they don’t like to hold.
Well, folks, that’s the simplest way that we can use contexts to avoid prop drilling. There is another way to use the context by wrapping the child component in need with UserContext.Consumer but I prefer this way.
Anyhow that’s it for this article. Enjoy your lonely quarantine. Don’t forget to binge watch some lame tv-series and procrastinate on your work. And again here’s my LinkedIn ping me if there’s anything. Goodbye!
