Please explain in the main concepts that react doesn't refire componentDidMount even with conditional rendering and the solution is to use different keys

[Zhell1]

As said by someone else here: "This should be way more obvious in the React documentation. This achieved exactly what I was after, but took hours to find."

This also took me hours to find that react doesn't automatically re-mount a component if the code is similar but just props change.

I was using conditional rendering doing:

var mycode = ""
if(a==true) {
      mycode = <MyComponent myvar="true"/>
} else {
      mycode = <MyComponent myvar="false"/>
}

And was expecting componentDidMount to fire to do crucial stuff, which obviously doesn't happen unless you specify a different key for both (solution at the bottom).

Please make this part of the Main Concepts of the React doc. The above linked answer got +190 upvotes which shows that this is a real problem for many coders.

Thank you very much for your consideration

Solution:

var mycode = ""
if(a==true) {
      mycode = <MyComponent myvar="true" key="1"/>
} else {
      mycode = <MyComponent myvar="false" key="2"/>
}

[alexkrolick]

The key is that the return value of the function component (or the render method of a class component) is what is compared by React each render cycle. You can do whatever you want with intermediate variables; only final tree of elements returned matters. And yes, React only remounts a component that appears in the same position in the tree as a previous render when the key is different. Otherwise, it would always be remounting and you wouldn't be able to use state.

These 2 ways of writing a conditional return have the same outcome:

- var mycode = ""
- if(a==true) {
-      mycode = <MyComponent myvar="true"/>
- } else {
-       mycode = <MyComponent myvar="false"/>
- }
- return mycode
+ return a ? <MyComponent myvar="true"/> : <MyComponent myvar="false"/>

---

PR welcome to add more explanation around this, or a suggestion for a specific page to add it to.