React Render Tutorial – 7 – Same Element Reference
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2024/01/1704862139_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: React Render Tutorial – 7 – Same Element Reference
In the last video we learned about the rendering behavior with respect to parent and child components we learned that when a parent component renders react will recursively render all of its child components and that is sort of the default behavior i mentioned that rendering is not a bad thing as it is how
React knows whether it needs to actually make any changes to the dom towards the end i also talked about unnecessary renders where child component goes through the render phase but not the commit phase in this video we are going to recap that scenario and i’m going to show you a simple
Technique to avoid the unnecessary render of a child component and i’m not talking about memorization i’m going to begin by creating a new folder called optimization within this folder i’m going to create a new file called parent one dot js for the code i’m going to copy it from parent.js
So ctrl a ctrl c and back in parent one ctrl v and i’m going to make the necessary changes the component name and lock statement will now be parent one also i just need the one button in this component so i’m going to remove the other two buttons so that is our
Parent one component now again within the optimization folder i’m going to create a new file called child1 dot js for the code i’m going to copy it from child.js so copy and paste it and change the component name to child 1 component and also the log message right now i’m simply duplicating the
Code but it is only for the purpose of separation of the topics we are learning in the series in parent 1 make sure to update the import statement to import the child 1 component let’s include this component in app.js save the file and head to the browser
On page load we have the render message from both the components which is perfectly fine if i clear the console and i click on the button and change state the parent component re-renders however the child component also re-renders the child component goes through the render face but the render output
Is ignored since nothing has changed from the previous render the child component did not make it to the commit phase so at the moment we have an unnecessary render for the child component let’s see how to optimize this rendering behavior back in vs code in parent one component
I’m going to begin by removing the child one component along with its import statement in app.js for the parent one component i’m going to include the child one component as children so we now have opening and closing parent one component tags and as children include child
One component make sure to import it at the top back in parent one component we destructure children from props and include it in the jsx this will effectively render the child1 component let’s save all the files and head to the browser on page load we still have the two log
Statements from the initial render if i clear the console and i click on the count button you can see that only the parent one component renders we have optimized our code to render only the parent one component and not the child one component when there is a state change in the parent component
Of course at this point the child one component is more of a prop than a nested component let’s try to understand why this code re-renders only the parent component and not the child component first recap what we’ve learned about the causes for a component to re-render a component can
We render if it calls a set a function or a dispatch function a component can also re-render if its parent component rendered in our first scenario where we had the child component directly nested in the parent components jsx the child component we rendered when the parent component be rendered
This is the default behavior in react to optimize this unnecessary render of the child component we moved the child component from being invoked in the parent components jsx to being passed as a prop it could be any prop but we chose to use children now for the interesting bit
In our component tree when we call the set a function in the parent component the component gets flagged for a re-render react sees that the children prop is part of the jsx but this children prop references the child one component now we all know the fundamentals in react
A component can change its state but it can never change its props taking this into consideration react will automatically provide us with the optimization you can picture react going about the re-render in the following way react looks at optimized parent one component react says that it has to convert the button
And the children prop to a react element now react tells itself hey this re-render is caused by a state change in the optimized parent one component since this component has no means of directly changing the props it is receiving i’m sure the children props could not have changed
So instead of going through the render phase for the child one component i’ll simply make use of the react element that was previously created and that is how react assuring that the children props has to be referencing the same element from the previous render will skip the render phase for the child1 component
I hope this makes things clear now if at all the component was re-rendering because of a props change then the child one component would also have to be re-rendered let me quickly demo that back in vs code i’m going to create a new component called grandparent.js
I’m going to use the snippet rafc to create a function component we need a way to change state in this component so let’s add a new count variable import usate at the top and then call it within the function i’m going to call this new count set new count and initial value 0.
I’m going to add a button to increment the count value so in the jsx button and the text is going to be grandparent count which renders new count and on click of this button we’re going to increment the count value so our function set new count take the previous
New count value and increment incremented by one format it and save the file now what we are going to do is include the optimized parent one component and the child one component so below the button parent one component and as children child one component make sure to import them both
At the top this time though we pass in a prop to the parent one component new count is equal to new count in app.js i’m only going to include the grandparent component let’s save all the files and head to the browser on page load we have the parent one render
And the child one render now if we cause parent one component to re-render because of a state change from the same component react will not re-render the child1 component as it is still the same element which couldn’t have changed so if i click on count only parent one gets re-rendered however
If i clear the console and if i now click on the grand parent count button you can see that both the parent one and the child one components are re-rendered so what happens in this scenario is that grandparent changes its state and causes a re-render this in turn will cause the parent one
Component to re-render react now knows that parent one component is not re-rendering because of its own state change but rather because of the parent component re-rendering that means the props could have changed so react will proceed with the render phase for the child one component but of course ignores the render output
And not committed to the dom i know this was a pretty elaborate explanation but it is one of the lesser known optimization techniques that i wanted to bring to your attention with that example let me quickly summarize this video in react when apparent component renders react will recursively render
All of its child components however this can lead to unnecessary renders where the child component goes to their interface but not the commit phase so if you’re experiencing performance issues you can extract the expensive child component and instead pass it down as props to the parent component
In doing so whenever there is a rerender caused by a change in the state of the parent component react will automatically optimize the rerender for you by knowing that the props has to be referencing the same element before and after the render this will also prevent you from having to wrap your components
With react memo everywhere in your project speaking of memo let’s take a look at that in the next video thank you guys for watching don’t forget to subscribe i’ll 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
I am still confused that in case of GrandParent, why Children is also re-rendered, due to the state change in GrandParent, there is change in Parent but I don't see Children being dependent on the same to get re-rendered. Isn't it also a useless render?
took this 12 minute video to understand and take notes = 28 minutes!
i am bad at online learning at this speed. Fellow learners any suggestions?
Edit: I already watch all utube vids in 2x speed. chatgpt said:
Prioritize Understanding: Focus on understanding the core concepts rather than trying to capture every detail. You can re-watch or look up specific details later if needed.
– I have OCPD, so was trying to understand each thing he says. Now I am planning to see entire video first and get the outline faster, now I would have understood, so rather than thinking without knowing outline, can easily just capture his statements and make notes of it.
wow – (note newCount is not at all used inside the parent, just it's 1 of the prop got changed in its value!)
!!?
After every two minutes I am forgetting everything
There's always something confusing in React but you always try ur best to give the all information anything left we can figure out because there's always something remaining!
Thanks Viswash!!!
I want to ask that whether the Parent component will enter the commit phase or not when we are changing the state of the grandparent component, please reply to this.
I watched this twice and didn't completely get it. I got some sleep and it sank in with the third viewing. 🙂
This video was really a great contribution to the series and to all of us. However, given that there is more to this, as noted by the comments over the last couple years, Vishwas, perhaps you could do a follow-up to confirm the accuracy of this video, or to describe the nuance discussed by others here?
Thanks as always!
so, i wrote all this code manually, in react version 18, if state changes in the parent component, child component will rerender every time, if using useReducer parent component will rerender every time dispatch is invoked even if state remains same, child component will only rerender when state changes.
the best react turtorial series in the whole you tube. He doesnt just teach he explaine and do summary and the best thing is when the one video is over in th next video , he revision it.That's why i like this channel
GoodJob!
nice one
Thanks from India where are you from?
It's just because ChildOne's element was moved and created in outside(App), App passed it to Parent as props. Parent rerendered but App didnt rerender so props still referenced to old ChildOne's element, ChildOne skipped the render
Thanx for the contribution of knowlodge and your hardwork…
So, instead of using the Child component directly, I would have to use props.children in the parent component?
What if you have to pass props to the children?
Would you have to go back to using the Child component instead of props.children?
What if you use something like:
{React.Children.map(props.children, function(child){
if(React.isValidElement(child))
return React.cloneElement(child, {…props})
})}
if you want to pass some specific props to a child?
Thanks!
@ 3:12 you mentioned that the child component did not make it to commit phase. If it didn't make it to commit phase, how does it appear in the logs ? coz the DOM will not be updated ?
I like your videos good job
good work .. keep it up ..!!
I had a question which I answered myself so I leave this here to help anyone seeing it in the future:
I asked myself why isn't the GrandParent rendering before parent and child. Answer is.. it renders but there is no console.log() to write that it renders.
9:46. I think child component re-renders even if you don't pass newCount prop to parent component. Because when grandparent component re-renders, it renders its children recursively and since ChildOne component is directly placed inside GrandParent it re-renders as well. To prove this, we can pass ChildOne into GrandParent as a children prop. And now when GrandParent re-renders or ParentOne has a prop, ChildOne never re-renders.
Hi
Awesome explanation… 👍
Q. After destructring the child component as a children prop.
How to pass new prop to children from parent state.
Awesome series!!
Very well explained Thank you Vish
Thanks a lot from Israel
What if the ChildOne component has a prop referencing the state in the parent. Will this technique still work? I assume not correct?
Excellent
VERY NICE!
Excellent. Thank you Vish. Looking forward to your next video
Very well explained !!