reactjs - React component mounting/unmounting with regard to if else statement in render

Question

When exactly is a child component constructed vs rerenderes? I googled that the key property might have something to do, but I can't figure it out. Also, say in the parent render function I have if true return A, else return B. What happen in this situation?

Answer 1

If A and B are different components, React will unmount one and mount the other if something has changed.

But, if they are the same, the reconciliation algorithm might just change any refs, change the props and call update. I agree that the docs are not clear enough there and I'm unsure if and when have any changes been made from version to version.

However, if this is the case (A and B are from the same component) you should not be writing your code like that but rather something like this:

<Component { condition ? ...propsA : ...propsB } />