title: React JS and a leaked input
body: <p>I'm new to React JS (using v0.10.0), and I'm trying to fix a memory leak in my project. Here's what I'm doing to render the page in question...</p>
  
  <pre><code>var mainContent = React.createClass({
      /*...various functions for handling state changes...*/
      render: function() {
          return React.DOM.div({
              children: [
                  /*...some children...*/
                  React.DOM.input({
                      id: 'quizname-textbox',
                      type: 'text',
                      className: 'textfield text-entry-toggle-textbox',
                      value: this.state.value,
                      autoComplete:"off",
                      autoCorrect: "off", 
                      autoCapitalize: "off", 
                      placeholder: gettext('Name Your Quiz...'), 
                      maxLength: "255",
                      onBlur: this.handleBlur,
                      onChange: this.handleChange
                  }),
                  /*...more children...*/
              ]
          });
      }
  });
  
  React.renderComponent(mainContent, document.getElementById('main-content'));
  </code></pre>
  
  <p>...and when I navigate away from the page, I'm doing this:</p>
  
  <p><code>React.unmountComponentAtNode(document.getElementById('main-content'));</code></p>
  
  <p>The call to <code>unmountComponentAtNode()</code> returns true, indicating that the component was successfully removed. However if I then take a heap snapshot using Chrome's developer tools, I see a detached DOM tree that contains all the elements that were just on the page. The input element from above is the only yellow element—meaning there's still a JavaScript reference to it—so it's likely causing the entire page to be leaked (see screenshot). I can't figure out why there's still a reference to that input—I'm not explicitly adding any other event listeners to it, and it is not referenced inside either <code>this.handleBlur()</code> or <code>this.handleChange()</code>. Moreover, if I simply comment that input out of the list of children, the problem completely goes away (the DOM tree no longer shows up in the detached list).</p>
  
  <p>This is perhaps the strangest clue of all: The heap snapshot says the input is a property of the window object named <code>elt</code>; however, I'm not giving it that name and I'm certainly not explicitly adding it directly to the window object.</p>
  
  <p>Any ideas why this input is still hanging around?</p>
  
  <p><img src="https://i.stack.imgur.com/CIPTq.png" alt="heap snapshot showing leak"></p>