Let's talk about the React Context API that React 16.3 added. An "old" API existed, but people avoid using it now since documentation recommends the new version. So what's great about React Context API?
Well, the definition that the documentation provides for the context API makes the benefits pretty clear: "Context provides a way to pass data through the component tree without having to pass props down manually at every level."
With pure React (using props objects), we need to store our data in our parent component in the tree to pass down the data to the child component. This chain of data can be very confusing if we have a lot of nested components. So the most common use case is to isolate the data in a place and make the components access it when needed. Redux is the most popular tool to deal with this case, and the new Context API works in essentially the same manner. Let me show you an example.
Let's create a React project with ```create-react-app```. In the app.js file, we will create two components, App and Car. On the App component, we will create an object with some initial state in it, and our goal will be to pass this state to the Car component.
Let's say we have a component chain with our Car component inside Factory and Factory inside App. The Car component needs to access the state stored in App. So I have to pass the data from App to Factory and then from Factory to Car. As I mentioned earlier, this can become problematic if we have a lot of nesting:
This is the kind of situation where the Context API can make our lives easier.
If we are going to use Context API, we need two things: a Provider and a Consumer. A Provider accepts a prop value, which can be an object, functions, or any type of data. You can assume it is an object containing your data and actions you want to work with. The Consumer is the object that makes the data stored on the Provider available to the component. Let's look at an example:
First of all, we have to create a Context and a Provider component where we are going to store our data.
On the MyProvider component, we are setting a state object and a render function. This function must return a Context Provider Object, which, in this case, is MyContext. As shown above, the Provider will wrap our application because we are going to use it in the App component as a store, and then we can access the data from it later.
At this point, the data we set for our Provider is hard coded on the prop value, the string, 'My context value'. We are passing this data to all the components that are wrapped inside the Provider, which are all its children.
So we can go back to our App component and wrap our code. In this way, any child inside that Provider can access the data stored in it.
You may notice that I removed the prop from the Factory component.This is because now we are going to consume our data directly from our Context to the Car component.
And how can we do this?
In the Car component, we have to create a Consumer to grab the data from our Provider. The Consumer requires a function to be passed as a child, and the child of a Consumer is always a function, so we need to indicate this to React by using curly braces. In the function, we receive the context value as an argument. This value is what you pass in the MyProvider props, and then you can return what you want, e.g. a <p> tag.
Now let's look at the actual result on the screen:
You can see our Provider wrapping all of the components and our Consumer just on the Car component.
If we go back to our Provider, the prop value is hardcoded "My context value." How do we pass our state object to this props? Actually, it's very simple: we pass it as an object and mount this object as we please, with functions, objects, and any type of data.
And then we consume it like this:
So, as we see in the examples above, the benefit of using Context API is avoiding all the processes you have to go through to get and pass data to parts of the React Component tree.
I hope this helps you understand a little bit about how Context API works. If you want to access the code repository, here it is. Thanks for reading!