Things you didn't know about re-rendering in React

In this video, we will look into when a React component actually re-renders.
Here's the aticle by Josh Comeau that goes more deep into this:
www.joshwcomeau.com/react/why...
If you liked this video, check out my whole React playlist here:
• React concepts illustr...
If you like hand-drawn illustrations and 2-3 frontend dev resources every week for free, then sign up for the FREE CodeSketched newsletter:
codesketched.substack.com/
Codesketched site:
www.codesketched.com/
More info about me:
www.kapeelkokane.com/
Background music used in this video 👇🏾
--------------------------------------------------------------
♪ Onion (Prod. by Lukrembo)
Link : • (no copyright music) l...
--------------------------------------------------------------

[@as_if]

3 reasons re rendering happens
- change of state value
- change of props value
- re rendering of parent/grandparent components (for the impurity (side effect) of a component)
Rendering itself is a well optimised method thanks to reconciliation. Moreover-
3rd reason can be avoided by using exporting default React.memo(component);

[@ziaahmad8738]

Nice video. I see you linked Josh Comeau's article. I have also subscribed to his newsletter. Good stuff.

[@user-hb2yz8wo4t]

great explanation,alldoubts are clear,Thanks

[@amys6175]

This is very useful, thank you so much

[@croccante7676]

great explanation, thank you very much

[@razakadegoke3340]

Very well explained thx for your video

[@georgeem9954]

Excellent Explaination

[@nikhilfromyoutube]

Good Explanation! I would like to you many video like this further.. ; )

[@as_if]

Thank you sir

[@saifullahkhan3776]

What an explanation!!!!! By the way you speak English so fluently

[@CodeSketched]

Thanks a lot. Please check out the latest video. You will like that one too.

[@QuantumVoid-ro3hi]

So what's the bottom line? That any component that doesn't depend on state OUTSIDE itself (apart from what's passed in through its props) is a candidate to be memeoized (including components that have internal state)?

[@astronautischilling]

ok + 1 subscribe, great explanation

[@CodeSketched]

Thanks a lot. Please share the video :)

[@aayushxhhetri1344]

lets say i have a const currentTime = new Date() below the count state and i try to render it Current Time: {currentTime.toLocaleTimeString()} in place of testcomponent ... then when i click the increament button the date also updates and shows the current date and time at the moment the button is clicked ..now you said that it wont happen because of virtual dom and it only renders the elements that is being updated but here this is no the case.. Can you explain why???

[@Someguy-vl7dj]

He said it won't happen because if the virtual dom doesn't change, it doesn't send any change to the dom, but in your case, the virtual dom changed because "currentTime.toLocaleTimeString()" returned a different value.

[@thuannguyenlehoa9711]

when state change, the component whose state will be flagged -> React will go down through the Component to find the component flagged and update the Component tree -> JSX convert React Element -> new VirtualDom -> new VirtualDom diff old Virtual DOM -> actual DOM, right? but when will the component be flagged? ( when call setter function)

[@mohamedshahrul1750]

u should have wrapped the Testcomponent in the React.memo for the example . since it doesnt receive any props but rerendner under a parent component. why u did u spoilt the video at end..