title: How do I safely 'close' or destroy a React component?
body: <p>I'm putting together a modular editor form. The main editor component dynamically renders text, check box, and select fields, depending on what item (in a list) it is targeting. The editor component is rendered via a function in the page's main component:</p>
  
  <pre><code>if(this.state.isEditing) return (
      &lt;ReForm.Editor key={this.state.editTarget.id} editTarget={this.state.editTarget} map={appointmentMap}/&gt;
  )
  </code></pre>
  
  <p>When an editable item is clicked by the user, <code>this.state.editTarget</code> is updated and <code>isEditing</code> is set to true, thus rendering the editor.</p>
  
  <p>At this point there is no issue. I can edit the editor's state with <code>this.setState()</code>, and when I save the edits, they are properly pushed onward through a Flux-like pipe to my database.</p>
  
  <p>The problem arises after I've closed the editor and re-opened it. Closing the editor simply involves setting the page's <code>this.state.isEditing</code> to false, which unmounts the editor component. Re-opening the editor view is exactly the same process as before, but now when a value in the editor is changed via <code>this.setState()</code>, the following error is thrown:</p>
  
  <pre><code>Uncaught Error: Invariant Violation: replaceState(...): Can only update a mounted or mounting component.
  </code></pre>
  
  <p><code>true</code> is returned when <code>this.isMounted()</code> is run from the editor's <code>componentDidMount</code> callback.</p>
  
  <p>However, <code>false</code> is returned by <code>this.isMounted()</code> when run right before attempting to <code>setState()</code></p>
  
  <p>This only happens after I've closed and re-opened the editor, so I'm thinking that this is related to how to safely 'close' or destroy a React component.</p>