title: Utilizing componentDidMount when switching between different instances of the same React component
body: <p>According to the react documentation: <a href="http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount" rel="nofollow noreferrer">http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount</a> we are adviced use componentDidMount for AJAX call that should be issued when a component is brought into view.</p>
  <p>However, when switching between to instances of the same component with different props, componentDidMount is only called for the first component. So what are we supposed to do in this situation?</p>
  <p>Currently I have the following workaround: In componentDidMount i do my AJAX call and In componentDidUpdate I compare old and new props to check if I am on a new &quot;instance&quot;, and if so I do my AJAX call. But that seems exactly like a workaround. So my question is: is this really the way to do it?</p>
  <p>I am aware that I could wrap my component in different empty components to solve my problem. However, this is not possible because we are building a data driven application that uses configurable components and it makes sense to use the same component with different configurations - which is where I'm running into problems.</p>
  <p>I am aware that we are actually talking about react elements and not instances as such - witch I guess is part of the problem. Probably I have different react elements utilizing the same instance.</p>
  <p>I have made a tiny example to illustrate the react behavior, using plain react (just to make sure I wasn't tricked by react-router or redux and what else we are using the real app):</p>
  <pre><code>class Foo extends React.Component {
      componentDidMount() {
          console.log('componentDidMount ' + this.props.foo);
      }
  
      componentDidUpdate() {
          console.log('componentDidUpdate ' + this.props.foo);
      }
  
      render() {
          return &lt;div&gt;Route is {this.props.foo}&lt;/div&gt;;
      }
  }
  
  function navigated() {
      ReactDOM.render(
          &lt;Foo foo={window.location.hash} /&gt;, 
          document.getElementById('app')
      );
  }
  
  window.addEventListener('hashchange', navigated, false);
  navigated();
  </code></pre>
  <p>Initially when I go to #/bar I get 'componentDidMount #/bar' and when I go to #/baz i get 'componentDidUpdate #/baz'.</p>
  <p>I seems like this unanswered question is a specific case of the same issue: <a href="https://stackoverflow.com/questions/28181074/react-does-not-know-when-i-render-the-same-component">React does not know when i render the same component</a></p>