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);
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)?
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???
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.
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..
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)
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);
Also in case of class components we can extend React.PureComponent instead of React.Component to make our class component PURE.
Nice video. I see you linked Josh Comeau's article. I have also subscribed to his newsletter. Good stuff.
Very well explained thx for your video
Thank you sir
great explanation,alldoubts are clear,Thanks
Amazinggg explanation man
This is very useful, thank you so much
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)?
Excellent Explaination
What an explanation!!!!! By the way you speak English so fluently
Thanks a lot. Please check out the latest video. You will like that one too.
Good Explanation! I would like to you many video like this further.. ; )
great explanation, thank you very much
In my today's interview, Interviewer gave me same scenario question and asked if child component will re-render or not.
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???
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.
ok + 1 subscribe, great explanation
Thanks a lot. Please share the video :)
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..
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)