Utilizing Componentdidmount When Switching Between Different Instances Of The Same React Component

According to the react documentation: http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount we are adviced use componentDidMount for AJAX call that s

Solution 1:

You can add the key property with unique value for each of hashes:

ReactDOM.render(
    <Component hash={hash} key={hash} />, domNode
);

This will update the component every time when the hash is really changed.

https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

Solution 2:

TL DR - your 'workaround' looks correct to me

When you initially render the component componentDidMount is called, when you change the hash prop componentDidUpdate is called. It is still the same component, it is just that a specific prop has changed value. In your case, you have logic (running an AJAX call when hash changes) that is specific to your application. React does not known that the hash prop is special, you make is special by adding the logic in componentDidMount. So I believe you have a good interpretation of the React docs and this way of achieving your goal is perfectly valid.