Yesterday I spent some time learning about how to use the context and when I read the docs I thought, “this sounds extremely complex for something that does a simple thing”. I definitely felt like this at first:
After playing around with the code and learning more about the different ways of using it. I thought it would be good to share it with people who may feel the same as I did.
What is React Context?
Before this feature came out we had to pass our props down into each component and then repeat the same process again and again into our components. This becomes quite nasty over time and it can potentially end up with issues with the props being so deeply nested in our components.
React Context is built to solve all of our problems because it removes the need for us to pass props down into our components. Instead, the components will inherit the props when nested within a context provider.
Less talking, more coding!
Now let’s actually get some code up and running so we can see what the context is doing.
Step 1 — creating our context object
The first thing we have to do is we need to create our context.
As you can see in the code there is a method that is on the React module called createContext . Now this is in place we can either carry on and make our provider or we can set a defaultValue as a parameter in the createContext method.
The default value will only apply those values when a provider is not wrapped around the consumers. I will go into more detail on this in the defaultValue section.
Step 2 — Apply the provider
The createContext method gives the ability to use two components which are bound to the method which are Provider & Consumer . A provider is a component that gives the ability to set data which can be accessed by consumer components without passing any props.
The component only takes one prop which is called value.
Step 3 — Setup the consumers
The Consumer component is used to get data from the Provider which will then pass data into the components that live nested in theConsumer. There are 3 ways to implement a Consumer.
Method one — using the Consumer component
We now have added a Paragraph component which has the DataContext.Consumer inside. This returns a function that gives us access to the properties set in the Provider. This way is useful to do with components that do not need any logic. So how can we do this with a component that has logic?
Method number 2 — using this.context & contextType
In components that use classes there is another way you can get access to the contexts data. As you can see, when we create our class we have underneath it the Paragraph.contextType = DataContext; and what this will do is it will give the class a property call context which is how we get access to our values that our provider are passing down.
Method 3 — using hooks
Both solutions above do work and thats fine but we have to do two different methods to make it work for each component. useContext method is used to get the props from the context the same way as the two above but it is a lot simpler to look at. It looks very similar to the way you get props from this.props but the syntax differs a little because you’re calling useContext instead.
Wait Matt, what about defaultValue ?
As mentioned about I spoke briefly about how we can set defaultValues to our context and what this will do is if we do not have a provider wrapped around our components then our consumers will use the defaultValue that is set in createContext as a fallback.
We have removed the Provider from our paragraph and set the values that used to be in the value prop inside our createContext function. This took me so long to figure out.
Conclusion
I hope this made it a lot more clearer for everyone! Like I said I learnt this a few days ago so there is probably a lot more to the Context method. I hope this has cleared up some confusion over the topic as it definitely did confuse me at first.
Top comments (0)