React Render Tutorial - 7 - Same Element Reference

📱 Follow Codevolution

Same Element Reference optimization technique in React

[samialvi]

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!!!

[trailerverse]

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

[vigneshgvs]

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.

[tonyg_nerd]

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!

[namelastname]

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.

[mrjebbar]

Excellent. Thank you Vish. Looking forward to your next video

[Moath]

Thanks man, your explanation is awesome

[vigneshgvs]

wow - (note newCount is not at all used inside the parent, just it's 1 of the prop got changed in its value!)

[adilsheikh]

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?

[chillchill]

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

[anasmunaf]

Thanx for the contribution of knowlodge and your hardwork...

[abuzarmahmood]

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.

[sagarramaswamy]

@ 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 ?

[joemart]

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){

return React.cloneElement(child, {...props})
})}

if you want to pass some specific props to a child?

[aryanplayit]

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.

[Action]

Hi
Awesome explanation... 👍

Q. After destructring the child component as a children prop.
How to pass new prop to children from parent state.

[bhaidar]

What if the ChildOne component has a prop referencing the state in the parent. Will this technique still work? I assume not correct?

[sparros]

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.

[khanapeena]

After every two minutes I am forgetting everything