React Hooks tutorials for beginners-6

Image for post
Image for post
context

Welcome to part-6 of the series. You can find part-5 here. We will learn about useContext hook in this part.

We have learned about context in the React tutorial series. You can learn more about it here.

To quickly recap — Context provides a way to pass data through the component tree, without having to pass props down manually at every level.

We have a problem, when we need a prop some level deep from the parent. We need to pass the prop through all the nested component.

In the below example the Username prop of the App Component is required by Component C. Now, it have to pass through the Component A and B also. Although they don’t need it.

Image for post
Image for post
The problem

We will first see the problem with the traditional Context API. So, go ahead and create a new react project with the below command.

npx create-react-app context-hook

Next, create a folder components inside the src folder. Inside it create three files Child.js, Parent.js and GrandParent.js

Put the below content in Child.js file.

Image for post
Image for post
Child.js

Now, call the Child component from Parent.js file.

Image for post
Image for post
Parent.js

Now, call the Parent component from GrandParent.js file.

Image for post
Image for post
GrandParent.js

And finally call the GrandParent component from App.js file.

Image for post
Image for post
App.js

Now, we want to pass props from App to Child directly and we will create context for the same.

We need to create the UserContext with React.createContext(). After that we have to wrap the GrandParent component with Provider. We are then pass the value, which can be accessed from any other component.

Image for post
Image for post
App.js

We will then first import the UserContext in Child.js file. Next, in the jsx we need to use the render props pattern, to get hold of the value passed by the context.

Here, we are wrapping the whole jsx in Consumer and then using the value with user.

Image for post
Image for post
Child.js

Now, in localhost we can see the value Nabendu been shown.

Image for post
Image for post
value

The context feature is great but the code gets complicated quickly, once we have multiple context.

Back to App.js, we will pass another value. So, we will create a new ChannelContext and wrap GrandParent with it.

Image for post
Image for post
App.js

Back to Child.js, we will consume the value. For this in our return statement for user, we are adding the ChannelContext Consumer.

Image for post
Image for post
Child.js

As, we can see from above the code get’s complicated pretty soon and if we need to pass another value, the nesting will only increase.

It shows ok on localhost.

Image for post
Image for post
localhost

The useContext hook is used to consume the value in a much simpler way. The Provider will still remain the same.

For useContext, let’s consume the value in Parent component. Here, we are first importing the userContext and ChannelContext. Then, we are getting the value with simple one liner like const user = useContext(UserContext).

After that we can use the variable with the usual jsx syntax.

Image for post
Image for post
Parent.js

So, our code have become very simple with no nesting thing and it will also look perfect in the browser.

Image for post
Image for post
Perfect

This completes part-6 of the series. You can find part-7 here.

You can find the code for the same in this github repo.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store