loading...
Cover image for Demystifying React Context

Demystifying React Context

mattc profile image Matthew Claffey ・4 min read

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:

Alt Text

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.

Context setup

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.

Context provider

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

Alt Text

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

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

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.

Default value to context

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.

Lord of the rings gif

Posted on by:

mattc profile

Matthew Claffey

@mattc

Hi! I'm Matt, I specialise in in HTML5, CSS3, JavaScript/React. Current tech platform I am focused on is Gatsby. I am currently working as a Software Engineer @Cinch.

Discussion

markdown guide