Get to Know React's New Context API

In a world where there are lots of different front-end frameworks, it's always hard to know which one to pick. Do I want to use the ever popular Angular? Or would diving into VueJS be beneficial to my scope of knowledge?

Then we have ReactJS, a framework created by Facebook that seems to be taking the front-end framework world by storm. Using components, a virtual DOM, and JSX (that's for a different day!), React seems to cover it all, making it a powerful framework.

In React, you have props and state. Two very important things to understand.

Props, short for properties, is the data that is getting passed to the component from a parent component.

State is data that is being managed within the component. So if each component has it's own state, how do we share that information to another component? You could use props, but props can only be passed between parent and child components.

So what are we to do if we have many layers of components to pass just one bit of information? Also known as, prop-drilling.

Let's take a look at an example of prop-drilling so we can understand what Context API is solving. In this example, we will see how we can pass information from one component, to the child component, then to that component's child.

I know the naming isn't the most real-world, but it helps to demonstrate context's ability to pass down to nested components. A more real-world scenario is one that happens here at Scotch with our cards: CardGrid -> CardContent -> CardFooter -> LikeButton.

Back to our example, this is how those Highest -> Middle -> Lowest components would get nested:

<Highest><Middle><Lowest>{/* we want our content here but dont want to prop pass ALLLL the way down ! */}</Lowest></Middle></Highest>

Notice how in order for the Highest and the Lowest to talk, they need the Middle to be the messenger?

Well lo and behold, we have React Context that can take care of all the work for us.

Free Node eBook

Build your first Node apps and learn server-side JavaScript.

📧

Nice!

React Context allows us to have a state that can be seen globally to the entire application.

We have to start with the context provider (<Provider />) to define the data you want to be sending around and you need the context consumer (<Consumer />) that grabs that data and uses it where called.

With Context, you now have the ability to declare the state once, and then use that data, via the context consumer, in every part of the application.

Sounds incredible, right? Well let's look at how we could set that up in a simple React application.

Today we are going to be setting up a basic React app. Let's do an app that passes a name from one component to another component that just so happens to not be the child component! Great! We will have three different levels, one will be the highest component that has the name stored in state, we will have the middle component, and then we'll have the lowest component.

Our application will send the name in state from the highest to the lowest without having to talk to the middle. Open up whichever code editor you like to use and let's start coding!

Ok, we will need the react dependency for our app. Go ahead and add that to your dependencies or if you are working in a text editor, do the following steps to install it

Install npm globally on your machine if you do not already have it.

npm install —save react

Check your package.json for the react dependency.

In our main js file, this is where the magic happens. Whenever we are building a React app, you always need to import your dependencies, otherwise that file won't know to use it. So at the top of the index.js file, let's import what we need.

import React,{ Component }from'react';

We have our import, now let’s move on to the component. We will want to declare our context in a variable for readability. Under our import let’s do

Let’s go over this. You will see that we have a state in Highest that we will want to pass to Lowest. We have our static property that will allow us to declare what we want our context to be. In our case, the name “React Context API”.

The Provider is holding on to that data so that when it’s consumed by another component, it knows what to give it. In our Lowest component you will see that we have the Consumer wanting that data without having to first pass it to the Middle component. That component instead just hangs out, declaring that Lowest is it’s child.

The React Context API is pretty awesome. But don’t use it unless you know it will be beneficial to you and your code. Redux might be just fine. Stay away from prop drilling and know that something like context can help you avoid that. It’s a great alternative!

If you want to check out my codesandbox with all the code, you can get it all here!

I hope you enjoyed this article and feel more comfortable with the context side of React. Now go try it out on your own code and see just how powerful it can really be.

Jobs!

As a former flight attendant, Sarah dove into the world of code at lightning speed. She attended a coding bootcamp and learned full-stack web development in a short 12 weeks. Currently heavily involved in the VegasTech scene, she hosts React meetups, attends Demo Day, and is currently in the process of planning/hosting a web development 2-day workshop. She's a huge fan of React but has built with VueJS, Angular, and EmberJS. When not coding, you can find Sarah cheering on her local hockey team, the Vegas Golden Knights!

In a world where there are lots of different front-end frameworks, it's always hard to know which one to pick. Do I want to use the ever popular Angular? Or would diving into VueJS be beneficial to my scope of knowledge? Then we have ReactJS, a framework created by Facebook that seems to b...