If suppose 2nd Render is same as 1st Render then 1st Render will unmounts or not?

Question

I'm a beginner in React and stuck with some problem.If suppose 2nd Render is same as 1st Render(means that next setState() calls won't cause any change to state) then 1st Render will unmounts or not as we know the React only updates the changes to the DOM.

Answer 1

The 2nd render won't unmount your component. Your component will just re-render if props or state changed.

eg. In the example below I have some booleanExpression variable that will resolve to true or false and depending on that it will render <MyCoolComponent /> or not.

If booleanExpression is set to false my <MyCoolComponent /> will be removed from the DOM by React and you could catch "unmount" event inside that component.

Then after booleanExpression is set to true <MyCoolComponent /> will be added to the DOM again and you could catch "mount" event inside that component.

Unmount or mount would happen in a case like this:

{ booleanExpression && <MyCoolComponent /> }

Note: Example above is just an example of syntax for conditional rendering of component and could be written in many ways.