React Context

#react #beginners

What is Context and when should it be used?

What is Context

When you first learn about React, you learn about state and props and how they are used to allow data to flow from one component to another. But what if you need to pass the same data to components that aren't parent and child to one another? Thats where Context comes in.
Context allows us to share data "globally" between components without the need to pass props. Essentially, sharing data just got easier.
Context has createContext that helps create a context object, and useContext is the hook that allows the data to be passed.
Context avoids the need for prop-drilling - the passing down of props through multiple levels of components that don't need the prop, just to get it to a deeper nested component that does need it.

So, with our example above, we see that the Interests component needs the theme, but it's parent doesn't. With prop-drilling the theme prop is passed down from the App to the Profile(where it isn't used), and then passed straight down to the Interests component.

When Should Context Be Used

Context should be used when an element needs to be used globally. The data shouldn't need to be updated very often either.
Examples of things that should be placed in Context:

Language
Themes
User data (current authenticated user)
Audio (a music app)

How Do You Use Context

The first step is to create context. Here is an example from a music app I was working on.

This created a context object called MusicContext. Context data have two components the context object and the provider. Before I move on to showing the provider, I want to show that in my music app, I went ahead and called my context hook useContext. It is paired with my context object and looks like this:

You don't have to do it that way, you can wait and use the hook in the components where you need to call the context. The way I did it means that I just need to call my useMusicContext = value. The Value is declared by the provider 👇🏻.

Here is an example of what that same music app's provider looked like:

The provider gives access of the context data to the child components.

Here is what the component looks like all together, including it's export variables.

Now that I have my Context, what do I do?

The next step is to wrap the Provider component around whatever component children will need to access the data. This usually occurs in one of the top most levels in your component hierarchy.

Using another example, where a UserContext and UserProvider had been created, the App component imported the UserProvider and wrapped it around the Header and Profile components, to pass down the theme.

In this example the value being passed to Header and Profile is [user, setUser]. When Header calls the context this is what it looks like:

The Profile component looks similar:

So recap our steps:
1.) We created a context using the createContext method.
2.) We then took that created context and created a provider to wrap around our components.
3.) In the that provider we created and defined a value prop that could be passed down.
4.) Lastly we called that value within our components, that had previously been wrapped by the provider, using the useContext hook.

The end result of the UserContext example is: