React Hooks Tutorial – 16 – useContext Hook Part 2
Video Title: React Hooks Tutorial – 16 – useContext Hook Part 2
In the last video we learned that it can be problematic to pass down props through several levels in the component tree we also learned that the context API will help solve that problem in this video let’s see how the context API was used before the introduction of hooks
Now I’m not going to completely go into the details of the implementation but we will understand how the code works to be able to compare and contrast with the code we write in the next video if you want a complete understanding of the context API I would recommend you watch
The videos from my react for beginners series alright let’s begin for this demo I will only consider the rightmost part of the component tree that is components C E and F our goal is to pass the user name prop from AB component and read that prop in component F using context
Ticket has started I have already created the components and nested them at the appropriate level in AB component we have component C within component C we have component E and finally within component e we have component F now let us understand how to get data from the app component to component F using
Context there are three steps to implement when making use of context step one is to create the context and I will create it in the app component const user context this equal to react dot create context second step we need to provide this context with a value and
The provider must wrap the children components for the value to be available so we wrap component see use a context dot provider component C is going to be a child to this provider and we need to provide a context value value is equal to vishwas which is the username the
Third and final step is to consume the context value so from AB component let us export the context and in component F let us import it next integer sex we need to make use of the render props pattern to get hold of the value passed by the context so user
Context dot consumer the context provides us with a username and we are going to return user context value is the user if you now save the file and take a look at the browser we can see the expected output use a context value which was the value being passed from the provider is
Being consumed using the render props pattern in the required component the context feature itself is great as you can see but the rated consume it is slightly more verbose than we would like it to be and to be honest if we have just the one context it would still be
Fine but let’s see how to consume multiple context values back in app component I’m going to create another context channel context is going to be react dot create context and now let’s provide this context with a value of code evolution we can provide multiple context values by simply adding the
Providers at each level so within user context channel context dot provider component C is going to be nested within channel context and the value is going to be the string code evolution the final part is to consume this and this is the part where it starts getting ugly in
Component F we have user context which gives us access to the user and within the function body we need to get again use the render props pattern to get hold of the channel name so we are going to import user context and channel context from AB Dodge’s and now within the
Function body we are going to return channel context dot consumer when the props pattern again which gives us access to the channel name value and then we can return this div tag user context value comma channel context value this is going to be channel
If you now take a look at the browser we are displaying values from both the contexts the choise and code evolution so the code works but it is not necessarily the most readable code just to consume to values there is just so much of nesting if only there was a
Better way to consume the context values this is where the use context hook comes to our support the use context hook lets you consume context values in a more simpler way let’s learn that approach in the next video thank you guys for watching don’t forget to subscribe I
Will see you guys in the next one
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Is this valid in 2024?
I have watched and practiced all your videos on react from basic, render, hooks, api call etc for the past 3 weeks now and I can proudly say I can work on some projects. I didnt want to rush on projects without learning react. I am a backend developer the the love for react and it wonders are overwhelming. Thank you very much.
In this part my code seems ugly and in my case it did not work and tells error
App.jsx:7 Uncaught TypeError: Cannot read properties of undefined (reading 'createContext')
Still I am going in next episode.
🙏👍
Done thanks
Context is used when nested child wants to consume state declared or available in parent without prop drilling (passing down the state variable needed as prop until it reaches the component that wants to use it is called prop drilling)
This video shows old way of using context. Wrapping parent component in a user context provider component and exporting the context, then child that wants to use the variables in the context is wrapper in context consumer component and importing the context that was exported.
Hooks replace this way of using context Next video shows context hook
3:52 consuming from multiple contexts gets ugly quick as you have nested context consumers
Context hook solves this
Is there any way to change the state from inside the context? What practice is best for that? Thanks in advance.
Man! You are the best .
Codevolution rocks!!!
UserContext -> Provider, Consumer
more nesting
Best Context tutorial I’ve found to date.
Excellent video. You're absolutely a gem!!
import ComponentC from './components/ComponentC'
my go-to teacher when i'm having issues
learn lot from you
thabsl y
Not sure who taught you how useContext works but this is outright wrong and far more convoluted then it needs to be
Great
How to create a context in Login component and make use of the login details in all other components? In this tutorial the context is created in App component and used in all other components. Please create a video to creat context in other components and make use of everywhere in the project. @codevolution
You made it so easy. Thank you so much. I subscribed
Excellent!
why did you not targeted directly component F instead of component C
god save us from callback hell:((
Error : 1. mention :: import {UserContext} from '../App' error showing ::: ./src/component/ComponentC.js
Module not found: Can't resolve './ComponentE' in '/home/kulbhushan/Desktop/React/route/src/component'
PLEASE HELP ME NOW
It' is full complete tutorial?
this video:
context API
what if we have multiple context values or props?
code at 3:00 is the render props pattern
is it a bad practice to use one Context only and pass in all the data that you need as a value so we dont need to use nested provider and consumer?
Thank you!
Clear and concise, your explanations work! Thank you.
Best React Hooks series on Youtube.
I was thinking you were going to go into Redux but today I learned about React.Provider/React.Consumer ! I had no idea.
I dont see the output at all!! i wrote the same code!!
very good instructor
It's a very good thing to understand how things work under the hood, in addition to the available libraries. I'm following this playlist and things really got ugly here, but this content is really great to know about. Thank you for the great <Content.Provider> you do here 😅😁
Sir, I know i am late but i need just a little help. How can we enter multiple values in the <UserContext.Provider> , Please let me know. Supported on Paypal .
you are the best!
Thanks for this beautiful tutorial.
P.S.: at 5:24 no need to use extra two "return" statements inside 2 consumers
Instead of creating multiple context providers, can't we pass the props as objects, & retrieve it accordingly using context consumers?
You're an amazing teacher! I had seen a lot of videos but I didn't get it. Your videos are so useful! Thanks!