Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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