title: Rendered component in Route does not fire its componentDidMount
body: <p><strong>DO NOT BOTHER READING THE QUESTION, THERE IS A SOLUTION AT THE END</strong></p>
  
  <p>I have the following Router, using <strong>react-router 4</strong></p>
  
  <pre><code>return (
    &lt;Router&gt;
      &lt;Page&gt;
        &lt;Route exact path="/" component={HomePage} /&gt;
        &lt;Route path="/courses/:courseName" component={CoursePage} /&gt;
      &lt;/Page&gt;
    &lt;/Router&gt;
  );
  </code></pre>
  
  <p>The <code>Page</code> component looks like this:</p>
  
  <pre><code>function Page(props) {
    const { children } = props;
    return (
      &lt;div className="page"&gt;
        &lt;SiteHeader /&gt;
        {children}
        &lt;SiteFooter /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p><code>SiteHeader</code>, <code>SiteFooter</code>, <code>HomePage</code> and <code>CoursePage</code> are pure presentational components; they take props in they spit markup out. Not connected to a redux store or anything. <code>HomePage</code> and <code>CoursePage</code> are defined as classes.</p>
  
  <p>Inside <code>HomePage</code> and <code>CoursePage</code> I need to use the <code>componentDidMount</code> hook, in order to interact with the DOM.</p>
  
  <p>Now the following strange thing happens:</p>
  
  <p><strong>STEP 1</strong>: I reload the app from the <code>/</code> url</p>
  
  <ul>
  <li>The render function of <code>Page</code> executes</li>
  <li>The constructor function of <code>HomePage</code> executes</li>
  <li>The <code>componentDidMount</code> of <code>HomePage</code> executes</li>
  </ul>
  
  <p><strong>STEP 2</strong>: I navigate to <code>/courses/:courseName</code></p>
  
  <ul>
  <li>The render function of <code>Page</code> executes</li>
  <li>The <code>componentWillUnmount</code> of <code>HomePage</code> executes</li>
  <li>The constructor function of <code>CoursePage</code> executes</li>
  </ul>
  
  <p><strong>Notice how the <code>componentDidMount</code> of <code>CoursePage</code> does not fire</strong>. This is important because I need the <code>componentDidMount</code> hook.</p>
  
  <p><strong>STEP 3</strong>: I navigate back to <code>/</code> from <code>/courses/:courseName</code></p>
  
  <ul>
  <li>The render function of <code>Page</code> executes</li>
  <li><strong>The constructor function of <code>HomePage</code> executes</strong></li>
  <li><strong>The <code>componentWillUnmount</code> of <code>CoursePage</code> executes</strong></li>
  <li>The <code>componentDidMount</code> of <code>HomePage</code> executes</li>
  </ul>
  
  <p><strong>STEP 4</strong>: I navigate back to <code>/courses/:courseName</code> from <code>/</code> again</p>
  
  <ul>
  <li>The render function of <code>Page</code> executes</li>
  <li><strong>The <code>componentWillUnmount</code> of <code>HomePage</code> executes</strong></li>
  <li><strong>The constructor function of <code>CoursePage</code> executes</strong></li>
  <li>The <code>componentDidMount</code> of <code>CoursePage</code> executes</li>
  </ul>
  
  <p><strong>NOTES</strong></p>
  
  <ul>
  <li>The exact same thing would happen if in STEP 1 I had reloaded from <code>/courses/:courseName</code> instead of <code>/</code>, instead of where I put <code>HomePage</code> it'd read <code>CoursePage</code> and vice versa.</li>
  <li><strong>I am always losing the <code>componentDidMount</code> of STEP 2 (the first redirect).</strong> After that all <code>componentDidMount</code> functions fire normally as expected.</li>
  <li>Notice how the bolded parts in STEP 3 and 4 are firing in the reverse order. I am not sure if this is of any significance. </li>
  </ul>
  
  <p><strong>THE QUESTIONS</strong></p>
  
  <ul>
  <li><p><strong>Why in STEP 2 the Route's <code>component</code> does not fire its <code>componentDidMount</code> method?</strong> Am I missing something very obvious here, is it some arcane knowledge I am not aware of or did I hit a bug?</p></li>
  <li><p><em>Bonus</em>: What is the deal with the constructor function of <code>HomePage</code> firing before the <code>componentWillUnmount</code> of <code>CoursePage</code>, while the oposite is not true when we navigate from <code>/</code> to <code>/courses/:coursName</code> ?</p></li>
  </ul>
  
  <p>Per <a href="https://reacttraining.com/react-router/web/api/Route/component" rel="nofollow noreferrer">documentation</a></p>
  
  <blockquote>
    <p>When you use component (instead of render, below) the router uses
    React.createElement to create a new React element from the given
    component. <strong>That means if you provide an inline function, you are
    creating a new component every render. This results in the existing
    component unmounting and the new component mounting instead of just
    updating the existing component.</strong></p>
  </blockquote>
  
  <p>which makes my issue make even less sense</p>
  
  <p><strong>WORKAROUND I FOUND</strong></p>
  
  <p>In my <code>Page</code> component if I simply move the order of the <code>children</code> like this</p>
  
  <pre><code>function Page(props) {
    const { children } = props;
    return (
      &lt;div className="page"&gt;
        {children} // MOVED FIRST
        &lt;SiteHeader /&gt;
        &lt;SiteFooter /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>then the issue is resolved, however I do not consider it a proper solution. I would really like to know what is happening, because it is tearing me apart.</p>
  
  <p>EDIT:</p>
  
  <p>The question was edited for brevity and to make the usecase scenario simpler</p>
  
  <p><strong>UPDATE - FURTHER OBSERVATIONS</strong></p>
  
  <p>Let <code>Stub.jsx</code> be the following component</p>
  
  <pre><code>import React from 'react';
  class Stub extends React.Component {
    constructor(props) {
      super(props);
      debugger;
    }
    componentDidMount() { debugger; }
    componentWillUnmount() { debugger; }
    render() { return &lt;div style={{ margin: '100px 0' }}&gt;&lt;span&gt;Hello&lt;/span&gt;&lt;/div&gt;; }
  }
  export default Stub;
  </code></pre>
  
  <p>and <code>MockPage.jsx</code> be the following component</p>
  
  <pre><code>function MockPage(props) {
    const { children } = props;
    debugger;
    return (
      &lt;div className="page"&gt;
        &lt;div&gt;Hi&lt;/div&gt; //Instead of SiteHeader
        {children}
        &lt;div&gt;Hi&lt;/div&gt; //Instead of SiteFooter
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Then all of the following configurations play correctly, <strong>meaning no <code>componentDidMount</code> calls are lost between redirects</strong>:</p>
  
  <p>A)</p>
  
  <pre><code>return (
    &lt;Router&gt;
      &lt;div&gt;
        &lt;Route exact path="/" component={Stub} /&gt;
        &lt;Route path="/courses/:courseName" component={Stub} /&gt;
      &lt;/div&gt;
    &lt;/Router&gt;
  );
  </code></pre>
  
  <p>B)</p>
  
  <pre><code>return (
    &lt;Router&gt;
      &lt;MockPage&gt;
        &lt;Route exact path="/" component={Stub} /&gt;
        &lt;Route path="/courses/:courseName" component={Stub} /&gt;
      &lt;/MockPage&gt;
    &lt;/Router&gt;
  );
  </code></pre>
  
  <p><strong>FINAL UPDATE:</strong></p>
  
  <p>FOUND THE PROBLEM!</p>
  
  <p>The problem was apparently the <code>react-addon-perf</code> which I was using inside a button that I was importing to my <code>SiteHeader</code> component. The Perf tool was throwing an error on the first redirect that happened which was messing up the lifecycle hooks of the components that followed. That explains the fact that when I moved the position of the <code>children</code> before the <code>SiteHeader</code> everything worked. Thanks to anyone who bothered reading my drivel and <strong>sorry</strong> for wasting your time.</p>