Hey fellow learner! In this blog, I am going to discuss React Context. I have divided this into two parts because I am lazy and did not want to write long, tiring blogs. Part 1 covers all the necessary theory behind Context whereas part 2 covers the code for how to use Context. Thus if you are here for the code, please refer to my next blog. Else let's march forward!
State management has always been a pain point while working with React because no one wants their data flowing like crazy from one component to another. And the one-way data flow of React (from parent components to child components) makes it even harder to figure out where the data should rest so as to avoid prop drilling.
What is prop drilling?
Let's say we have a component called Home. Home has all the data related to the users who have signed in. Now for Home, there is a child component, say Hotels. which, in turn, has other components called BookHotel. This BookHotel component needs user data to place a booking successfully.
In order to do that what we would normally do is pass down the user's data to the Hotels component and then pass it down to BookHotels as props. Hence we can say that we are drilling the props into components. Can you sense a problem here?
Hotels component does not need the data at all and yet due to the one-way data flow constraint we need it to take user data as props from the Home and pass it down to its child component. This may not sound much troublesome now but imagine if it were to be passed down to a component that was 5 or 6 levels down further. All the intermediate components would just be doing meaningless work while making sure that the right component receives the data. This process of passing down data to components that do not need it is called props drilling.
Now you might argue that Hey, why don't you keep the data in the Hotels component, to begin with? Okay for a minute let's assume we did that. But then think about this, what if there is a Flights component under Home. This Flights component also has a BookFlight component which needs the user data as well.
But we cannot make the user data flow from Hotels to Home and then Flights because data cannot flow to its parent component. Can you see the sort of messed up things we would be doing if we don't carefully place the data right?
So to save us from all this trouble, React version 16 brought with it the concept of Context APIs.
Context is basically an API built into React that makes accessing data simpler than ever. It helps us make sure that any component that needs the data has access to it without passing any data as props. You can think of Context as global variables that are available to any and every component.
So what kind of data should be defined using Context?
Whenever the data is updated all the components which access that data are re-rendered. This may cause abrupt re-renderings across the components. That's why we should only define data that is not frequently updated, using the ContextAPI. It is to note that Context is not a state-management tool like Redux rather it is only used to make the consumption of data an easier task.
Therefore data such as:
theme data
user data (currently authenticated user)
location-specific data
is the ideal type of data that can be defined using ContextAPI.
I know this has been a long read but I hope that now you have clearly understood what Context is and why do we need it. Now in the next blog, we will jump directly into the code and see how we can set this up.
Thank you so much for reading! Please let me know in the comments if this helped you in any way. Also since I am new to writing blogs, I'd really appreciate some honest feedback.
Keep learning!
Top comments (1)
boardsontop.com