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

[@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);

[@KeshariPiyush24]

Also in case of class components we can extend React.PureComponent instead of React.Component to make our class component PURE.

[@as_if]

@KeshariPiyush24 acha, I haven't studied about class components.

[@lasue7244]

In this very video, it's explained that props changes doesn't rerender a component.

[@as_if]

@@lasue7244 huh, nah, see 3:50. It has to

[@ziaahmad8738]

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

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

[@razakadegoke3340]

Very well explained thx for your video

[@Monishreddy-l2k]

Amazinggg explanation man

[@PrajaktaBhapkar-v8i]

great explanation,alldoubts are clear,Thanks

[@dailyPractice1]

In my today's interview, Interviewer gave me same scenario question and asked if child component will re-render or not.

[@amys6175]

This is very useful, thank you so much

[@georgeem9954]

Excellent Explaination

[@nikhilfromyoutube]

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

[@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)

[@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.

[@croccante7676]

great explanation, thank you very much

[@as_if]

Thank you sir

[@thecatleo]

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

[@astronautischilling]

ok + 1 subscribe, great explanation

[@CodeSketched]

Thanks a lot. Please share the video :)