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

從 React 文件的 Main Concepts 部分開始，issue 將其指定為預期的切入點。說明帶有已變更 props 的條件式渲染不會重新掛載相同的元件，並記錄 issue 中展示的 distinct-key approach；當讀者能清楚理解該行為與解決方案時，即視為完成。