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
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
Step 2 — Apply the provider
createContext method gives the ability to use two components which are bound to the method which are
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 . Value can be either a string, number or an object.
Step 3 — Setup the consumers
Consumer component is used to get data from the
Provider which will then pass data into the components that live nested in the
Consumer. There are 3 ways to implement a
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
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 — useContext method
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
Wait Matt, what about
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.
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.