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

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"/>
}

Bắt đầu từ phần Main Concepts trong tài liệu React, nơi issue xác định là điểm bắt đầu dự kiến. Giải thích rằng việc render có điều kiện với props đã thay đổi không remount cùng một component, đồng thời ghi lại distinct-key approach được trình bày trong issue; công việc được xem là hoàn tất khi hành vi và giải pháp rõ ràng với người đọc.