Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React Context API!
You have completed React Context API!
Preview
Let’s go over the key concepts you learned in this workshop.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In this workshop,
0:00
we learned how to avoid prop drilling
by using React's Context API.
0:01
Context is a more efficient and
0:07
maintainable way to pass data to all
the components of your React app.
0:09
Using context can be very tempting,
but just because you need to pass
0:15
data several levels deep, doesn't mean you
need to create a context for that data.
0:20
React context is best used for
data that updates less frequently.
0:26
For example, some common use cases for
0:32
context are theming to store state that
controls the appearance of the app.
0:35
Authorized user to store the information
of the current logged in user.
0:41
Managing state to store app-wide
state that doesn't update frequently.
0:47
And routing,
most routing solutions use context.
0:54
For example, React router uses
context to store their data.
0:57
But when you need to use context,
1:03
you'll first create one using
the createContext method.
1:05
This will return the context.
1:10
So you'll set createContext equal
to the name of the context.
1:12
You will pass createContext
the context default value.
1:17
This default value is the value
a component will get when they try
1:22
to access the context but the component
hasn't been provided the context.
1:27
We didn't have to worry about the default
value because in our app we provided
1:33
our context to the entire app by wrapping
the App component in both provider tags.
1:40
With the context created,
1:47
we then created a higher order component
to provide the context to our app.
1:49
We passed context the values we wanted
it to store with the value prop.
1:55
And just to keep things organized,
we added a property named actions,
2:01
which will store all our functions.
2:07
To provide our context to
the components that need access to it,
2:10
we imported the provider in index.js and
2:16
wrapped our App component
within the provider tag.
2:19
With the context created and
the provider tags providing the context
2:24
to the entire app,
we were now able to consume the context.
2:29
The old way to consume the context
is with the consumer tags.
2:33
This way is mostly used when you need to
consume context in a class component.
2:38
But since all our components
are function components,
2:44
we consume the context
with the useContext Hook.
2:49
The useContext Hook takes in
the context you want access to and
2:53
it returns the value passed
to the provider's value prop.
2:58
Hopefully, by working through
the sequence of creating a provider,
3:03
setting the values for context, and
3:08
accessing them with the useContext Hook
several times throughout this workshop,
3:10
you're starting to understand how the
Context API helps you avoid prop drilling.
3:16
And how it could help with problems
that might come when you have state and
3:22
actions meant to be shared with
many components in your app.
3:27
You might not always know how many
components will be between the parent and
3:31
the nested children you
want to get the data to, so
3:36
context provides
an incredibly handy way for
3:40
components at any nesting level to
directly access the data they need.
3:43
If you have questions about
anything covered in this workshop,
3:49
feel free to reach out to the Treehouse
staff or other students in the community.
3:53
Thanks everyone and happy reacting.
3:58
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up