React Render Tutorial – 14 – Context
Video Title: React Render Tutorial – 14 – Context
Welcome back everyone so far i’ve mentioned two ways to cause a re-render in a react app a component can re-render if it calls the use state set a function or the use reducer dispatch function the component can also re-render if its parent component re-renders now let’s take a look
At the context api which is another way to cause a component to re-render in this video we are going to understand the rendering behavior in react with respect to the context api if you’re looking for an in-depth explanation of react context i suggest you go through my react tutorials for beginners playlist
In the channel in that playlist i have covered in detail what is react context why do we need context and how to use it in the react application in this video we are only going to focus on the rendering behavior with respect to the context api
First let’s try to understand at a high level the render phase when we have react context in a component tree since we have been through this several times i’m only going to focus on what is necessary from the context point of view now let’s assume that our application has five components app component
Parent component and three child components namely child a child b and child c the parent component contains a count state which it renders in the jsx and the same count value has to be rendered by child c component as well so we create a new count context
In the parent component and provide the count value we then use the use context hook in component c to consume that value pretty straightforward usage of the context api but let’s quickly understand how the render phase works in this scenario let’s say the initial render is completed so all the components have been
Rendered once now since the count value is a state variable in the parent component let’s say we called the setcountsetter function to increment the count value if the count value increments the component will be flagged for re-render we know that react starts from the root component and finds the components flagged for re-render
React says that the parent component has been flagged when it’s rendering the parent component react says that the parent component also renders a context provider it then checks to see if the context provider has been given a new value since we increment the count value the context provider
Indeed has been given a new value react will make a note to re-render all the components that consume the context value in our example the component is child ce so react makes its way down the component tree and when it encounters child c it is going to re-render
That component and by now you probably know what happens in the rest of the render and commit phase so this is the rendering behavior with respect to the context api of course there will always be certain points that we have to make note of and the context api is no exception
Let’s take a look at an example and see what i’m referring to now to get us started i have already created a few components so in the components folder i have created a new folder called context within this folder i have created two new files context parent dot js and context children
Dot js in context parent.js we have one component called context parent within this component we have a call to use state which maintains account state variable we also have a log message to indicate the component render in the jsx we have a button to increment the count value and display the count value
We also have a child component which is the child a component let’s now head to contextchildren.js now this file contains three children components i decided that instead of creating three separate files it is simpler to have all three children components in the same file let’s take a look at the three components
First we have child a component this is the component nested inside the parent component right here now within the child a component we have the render log message and for the jsx we simply display the text child a and then this component has its own child component which is child
B if you take a look at child b it is very similar to child a it has a log message the text child b and has a child component of its own which is the child c component the child c component has a log message
And then for the jsx just the text child c so if i go back to the slide we have created this very component tree now our aim is to get the count value from the parent component and display it in child c component and the way to do that
Is to use the context api in the parent component we create and provide the context value and in child c component we consume it using use context let’s go back to vs code and implement that in the parent component first let’s create a context so at the top export const
Count context is equal to react dot create context in the next line i’m also going to create the provider component the const count provider is equal to count context dot provider now we can provide the count value to the child component so in the jsx count provider
Value is equal to count and then child a is the children next let’s head over to the child c component and consume this context value so in contextchildren.js at the top import use context from react in the child c component const count is equal to use context and pass in count context
Make sure to import it at the top then in the jsx we can display the count value so child c count is equal to count all right let’s save the files include context parent in app.js and head to the browser to test the rendering behavior on page load we see the render messages
From the parent component and the three children components so the initial render works fine we can also see that the count context value from the parent component is being consumed in the child c component now let’s observe the render behavior when we update the count value thereby changing the context value
If you recollect from the render phase slide i mentioned that if the context provider receives a new value components consuming the context value will also get updated so in our case when i click on the count button in the parent we should see that the parent and child c components should re-render
However if i clear the console and click on the count button you can see that all the four components we render this includes the two children components which have nothing to do with the context value now this might seem confusing but the reason is pretty simple remember when a parent component re-renders
All the children components recursively we render so what is happening in our example is that when the state in the parent component changes the parent component re-renders if parent re-renders every single child component also re-renders this is the default behavior in react in fact the component child c we renders
Because the parent we rendered and not necessarily because the context value was updated you might ask yourself then what is the whole point of context well remember context helps you solve the problem of props drilling so you don’t have to specify props through each nested component in that aspect context still remains
Very helpful but when it comes to context and the rendering behavior it is not the most efficient now i say that given we write the code like how i have written for this example there are a few ways to optimize the rendering behavior with context
Which we will see in the next few videos for now please keep in mind that if you write your code the way i have written context doesn’t really have the best rendering performance all right thank you guys for watching don’t forget to subscribe i’ll see you guys in the next video
-
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
Really Insightful series. Thanks
You are amazing to create this tutorial. I just finished watchig this whole playlist. Thank you so much….. <3
good !
Are you using some tool to format the javascript file after you save? Or you just skip the part where you format it to look better yourself?
Hey @Codevolutions I m using context along with useReducer in reducer function I'm using setinterval to update the state . But problem is that state gets updated but component did not re render itself for countdown timer
Thanks for the great video 😊😘😘
VERY NICE!
Can anyone tell me if the unnecessary rendering of component A and B happens in redux as well?
these tutorials are really helpful!! thank you
If you take live session or you are in teaching field i love to join your classes and learn from you…i love your teach..
Do you take a live session ..??
Thank you sir ,your tutorial is amazing …