Putting Things in Context
If you’re familiar with React then you know both the ease with which it lets you create and render a network of user facing-components, and the pain of properly connecting and piping data to all those components. As you add nested components to your app, it becomes cluttered with “props” and handler functions that relay data up and down component levels.
Communicating between components is necessary for React apps, and several tools have been developed to help make management of this easier. Redux is a popular library that tries to accomplish this, and recently React added its own API to help with this as well, React Context. I’m not going to dive into how it compares to other data management libraries, but I will show you how to set it up so you can test it for yourselves.
Context works by using a <Provider> component that can be wrapped around the top levels of an app’s component tree, and a <Consumer> component that you wrap around nested components so that they gain access to data passed to the Provider. In this way, an app can bypass “drilling” data down through components that don’t use the data. So to start, you’ll need to create a new context object using the React library.
I suggest separating this code in its own context file and then exporting the parts we need. The context object contains the Provider and Consumer components that we’ll need to place inside our app. You can assign those properties to their own variables and export those.
Now that we have this file shipping out the parts we need, we can switch over to the top of our app to import the Provider. You typically want to wrap a Provider as high as possible so that it encompasses all the components that might want to connect to it as a Consumer.
Now we have this “very important data” that we need to nest deeply into our app to reach a particular component. We don’t want to share this information with the NotImportantComponent because, well, it’s not important enough. So rather than pass the data to that component as props, instead we’ll pass it into our Provider.
Now we can travel down our component tree as far as we need to and give the desired component access to our context through Consumer tags. So lets traverse down our app to a find a very important component.
Ok now that we’ve traveled within an arbitrary number components of this very real and very functional app, it’s time to import that consumer we exported earlier so we can link it to this component.
Within the consumer tags we place a function that accepts the context as an argument and returns whatever JSX we wish. Within the JSX we can freely access the context, which contains whatever we passed into it at the Provider. In this case, I only passed down a string, but just as with passing down props, I could’ve just as easily passed down functions or objects or whatever needs to be shared.
And that’s a brief overview of how to connect your app and its components to the context API. Next time you work on a React app that has a lot of intermediary components, consider using this to avoid having to overshare data with unnecessary parts. I encourage you to try it out yourself and refer to the docs for it here.
