title: How can I prevent React from unmounting/remounting a component?
body: <p>I am using <code>react-router</code> and <code>react-redux</code>. I have two routes like this:</p>
  
  <pre><code>&lt;Route path='/edit'     component={ EditNew } /&gt;
  &lt;Route path='/edit/:id' component={ EditDraft } /&gt;
  </code></pre>
  
  <p>where <code>EditNew</code> and <code>EditDraft</code> are data-providing containers that wrap an <code>Editor</code> component using the <code>react-redux</code> <code>connect</code> function:</p>
  
  <pre><code>const EditNew = connect(state =&gt; ({}))(React.createClass({
      render() {
          return &lt;Editor /&gt;;
      }
  }));
  </code></pre>
  
  <p>and</p>
  
  <pre><code>const EditDraft = connect(state =&gt; ({ drafts: state.drafts }))(React.createClass({
      render() {
          const { params, drafts } = this.props;
          const draft = findDraft(params.id, drafts);
          return &lt;Editor draft={ draft } /&gt;;
      }
  }));
  </code></pre>
  
  <p>Now, <code>Editor</code> is rigged up in such a way that when you begin typing into a blank <code>Editor</code>, it triggers a <code>history.replaceState()</code> from <code>/edit</code> to <code>/edit/:id</code> with a ranomly generated ID. When this happens, I get the following sequence of events:</p>
  
  <ul>
  <li><code>EditorNew</code> unmounts</li>
  <li><code>Editor</code> unmounts</li>
  <li><code>EditorDraft</code> renders and mounts</li>
  <li><code>Editor</code> renders and mounts</li>
  </ul>
  
  <p>When I coded these two containers, I thought that the <code>Editor</code> component contained in both of them would be reconciled without unmounting and remounting. This is problematic for me for several reasons besides the extra unnecessary work, chief among which are that the editor ends up losing focus and proper cursor range after the unmount and remount. </p>
  
  <p>To no avail I have tried specifying <code>key</code> for the <code>Editor</code> component to hint to the reconciliation system that it's the same component, and I've tried <code>shouldComponentUpdate</code>, but that doesn't get called, which makes sense given what React is doing.</p>
  
  <p>Apart from combining the two containers into one container with more complicated <code>render()</code> logic, is there anything I can do to prevent the <code>Editor</code> component from unmounting/remounting during the history transition?</p>