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
In this video, we'll move the Provider, along with the state and actions into a separate (higher order) component. As a result, the App component will have less code and responsibilities, making it easier to think about and maintain.
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
There's still some improvements
to be made in the app.
0:00
In this video, we'll move
the provider along with the state and
0:04
actions into a separate
higher order component.
0:08
As a result, our main App
component will have less code and
0:12
responsibilities making it that much
easier to think about and maintain.
0:17
In UserContext.js,
we'll first create a provider
0:22
component as a function
named UserProvider.
0:27
So we'll type const UserProvider,
it will take in some props,
0:32
And we'll add a return statement.
0:41
We'll need to access this
component outside of this file.
0:46
So, let's add the keyword export
to the front of the component.
0:51
The UserProvider component is going to be
what's called a higher-order component.
0:56
In JavaScript, a higher-order function is
1:03
a function that accepts another
function as an argument.
1:06
In a similar way, a higher-order
components acts as a wrapper
1:11
that takes an existing component and
returns a new component.
1:16
Higher-order components let you share
functionality across multiple components,
1:20
and it's a common technique in React for
reusing component logic.
1:27
You can learn more about higher-order
components in the teacher's notes
1:32
with this video.
1:35
Next, I'll move the user state
into the user provider component.
1:37
I'll cut it out of App.js and
paste it inside the UserProvider function.
1:43
Let's make sure to import the useState
hook at the top of the UserContext file.
1:50
Then, I'll also move the signInUser and
1:58
signOutUser functions into
the provider component.
2:02
We'll head over to App.js,
scroll down to the functions,
2:07
and select both signInUser and
signOutUser, and
2:13
cut it out of App.js and
paste it right below our state.
2:17
Higher-order components return
a new component that wraps useful
2:22
functionality, like providing
context to a consumer for example.
2:27
So in the return statement,
I'll include a provider tag to provide
2:32
the context to all children of
this higher-order component.
2:38
I'll cut the provider tag out of App.js,
delete the closing provider tag,
2:43
and the user context import statement,
since app no longer needs it.
2:50
In UserContext.js,
we'll paste the provider tags
2:58
in the return statement
inside the parentheses and
3:03
we'll add the closing tag.
3:08
Inside this component, I'll add a JSX
expression that returns props.children.
3:11
Children is a special prop
in React that lets you pass
3:19
components as data to other components.
3:24
Whenever we use the provider component
by defining a set of provider tags,
3:28
any elements placed between the tags
is considered to be children of
3:33
the component.
3:38
So props.children is going to pass
anything we include between the opening
3:39
and closing tags into the provider
component and render it to the UI.
3:46
For example, the provider should live as
close to the top of the app as possible.
3:51
So lets wrap the entire app in
our new user provider component.
3:57
In the app's entry file,
index.js, let's first
4:03
import our user provider
component with a named import.
4:08
import,
4:13
{ UserProvider } from './context/UserContext'.
4:16
Then in root.render we'll wrap the App
component in the UserProvider tag.
4:22
The App component is being passed
to the UserProvider as a child,
4:38
and props.children is what
allows the App component along
4:44
with all of App's children to be passed
into the UserProvider and render.
4:49
If you have a look in React dev tools,
4:56
you will see that user
provider wraps the entire app.
4:59
It's storing the user state and
providing it to the consumers
5:03
along with all the actions defined
in the provider's value prop.
5:08
So now, App is a bit simpler.
5:14
App is no longer responsible for
the user state.
5:17
Up next, I'll challenge you to
turn app into a simple stateless
5:21
component by adding a new theme context.
5:26
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