Batching can update one component twice, causing unpredictable lifecycle

[m4tthumphrey]

This one is hard to explain or reproduce but I'll try...

I'm using the following mixin which has changed slightly from the original I found in a gist a while back:

var React = require('react');

var LayeredComponentMixin = {

  componentDidMount: function() {
    this._layer = document.createElement('div');
    document.body.appendChild(this._layer);
    this._renderLayer();
  },

  componentDidUpdate: function() {
    this._renderLayer();
  },

  componentWillUnmount: function() {
    this._unrenderLayer();
    document.body.removeChild(this._layer);
  },

  _renderLayer: function() {
    var layer = this.renderLayer();

    if (null === layer) {
      layer = <noscript />;
    }

    React.render(layer, this._layer);

    if (this.layerDidMount) {
      this.layerDidMount(this._layer);
    }
  },

  _unrenderLayer: function() {
    if (this.layerWillUnmount) {
      this.layerWillUnmount(this._layer);
    }

    React.unmountComponentAtNode(this._layer);
  }

};

module.exports = LayeredComponentMixin;

This allows me to create layered components, in my case a modal dialog. I use the following component to build my modals:

var React = require('react');

var ToolboxUserActionCreators = require('../../actions/ToolboxUserActionCreators');

var ModalStore = require('../../stores/ModalStore');

function getStateFromStore() {
  return {
    modalCount: ModalStore.getModalCount()
  };
}

var Modal = React.createClass({

  componentWillMount: function() {
    this.setState({
      modalLevel: ModalStore.getModalCount()
    });
  },

  componentDidMount: function() {
    ModalStore.addChangeListener(this.onChange);
    document.addEventListener('keydown', this.handleKeyDown);
  },

  componentWillUnmount: function() {
    ModalStore.removeChangeListener(this.onChange);
    document.removeEventListener('keydown', this.handleKeyDown);
  },

  getInitialState: function() {
    return getStateFromStore();
  },

  getDefaultProps: function() {
    return {
      className: 'feature'
    }
  },

  render: function() {
    var className               = 'toolbox2-modal-content toolbox2-modal-' + this.props.className;
    var modalBackdropClassName  = 'toolbox2-modal-backdrop';
    var handleBackdropClick     = this.handleBackdropClick;
    var killClick               = this.killClick;
    var modalLevel              = this.state.modalLevel;
    var totalModals             = this.state.modalCount;

    if (modalLevel < totalModals) {
      modalBackdropClassName += ' toolbox2-modal-backdrop-secondary';
    }

    return (
      <div className={modalBackdropClassName} onClick={handleBackdropClick}>
        <div className={className} onClick={killClick}>
          {this.props.children}
        </div>
      </div>
    );
  },

  killClick: function(e) {    
    e.stopPropagation();
  },

  handleBackdropClick: function() {
    this.props.onRequestClose();
  },

  handleKeyDown: function(e) {
    if (e.keyCode === 27) {
      this.handleBackdropClick();
    }
  },

  onChange: function() {
    this.setState(getStateFromStore());
  }

});

module.exports = Modal;

This combination works perfectly. That is until I close the highest modal. If an <input /> component is used inside of the <Modal> render method, ie this.props.children, the following error is thrown. All other element types (that I've tried including textarea and select work fine, but input throws the following:

Uncaught Error: Invariant Violation: getDOMNode(): A component must be mounted to have a DOM node

The trace is as follows:

Uncaught Error: Invariant Violation: getDOMNode(): A component must be mounted to have a DOM node. bundle.js:60783
invariant bundle.js:60783
ReactBrowserComponentMixin.getDOMNode bundle.js:62069
ReactCompositeComponent.createClass.componentDidUpdate bundle.js:64334
assign.notifyAll bundle.js:68718
ON_DOM_READY_QUEUEING.close bundle.js:72258
Mixin.closeAll bundle.js:68960
Mixin.perform bundle.js:68901
Mixin.perform bundle.js:68887
assign.perform bundle.js:56107
(anonymous function) bundle.js:56186
wrapper bundle.js:53734
Mixin.closeAll bundle.js:68960
Mixin.perform bundle.js:68901
ReactDefaultBatchingStrategy.batchedUpdates bundle.js:64050
batchedUpdates bundle.js:56122
ReactEventListener.dispatchEvent bundle.js:64980

ReactCompositeComponent.createClass.componentDidUpdate bundle.js:64334 is here.

This only happens when there are several modals on top of each other; one dialog with an <input /> runs fine with no error.

The weird thing is that the app still runs fine, the error thrown has no impact (apart from being thrown) on how my app performs....

This is on 0.12RC1 using webpack to build.

[m4tthumphrey]

I've spent all day on this and still no closer to solving it. I have since found out though that if I use the ESC key to close the modal no error is thrown...

[syranide]

Like the error says, it seems your calling getDOMNode on a component after it has been unmounted. Go through all your getDOMNode calls and make sure they're correct, then do the same again but log this.isMounted() and figure out which one it is that's called "too late".

[m4tthumphrey]

This is the point tho, the getDOMNode() is coming from the ReactDOMInput component (see here) not any of my components....

[m4tthumphrey]

I'm debugging deep into the core now and ALL <input /> components are marked as UNMOUNTED which is causing the problem. I really don't get this. How can a component update if it's unmounted? And it's ONLY <input />... <select /> <textarea /> etc are all fine...

[plievone]

ReactDOMInput uses asap (formerly setImmediate) to queue updates, perhaps there is something about unmounting that should be added to tests?

[m4tthumphrey]

I have temporarily "fixed" this by calling this.forceUpdate() just before the modal is closed. Not sure why this fixes it but it does and it puts an end to 5 days of trying to figure it out!

[sophiebits]

@m4tthumphrey Can you build a simple repro case for this on jsbin or jsfiddle? This does sound like a bug but without a way for me to reproduce it it'll be hard to fix.

[m4tthumphrey]

I'll try to reproduce this on jsf tomorrow... @spicyj

[m4tthumphrey]

Still haven't had a chance to replicate but it appears that this is only happening Firefox and IE and not in Chrome.

[m4tthumphrey]

@spicyj I don't think I'm going to be able to replicate this outside of my app (its too big). If I make the app available to you publically, would that help?

[m4tthumphrey]

K, so I've wrapped componentDidUpdate() in both ReactDOMInput and ReactDOMSelect with

if (this.isMounted()) {
  // ...
}

and all is good in all browsers. Obviously there is a bug somewhere but I'm too deep in this problem to find the root cause. I will leave this issue open and if anyone fancies digging into it let me know and I'll set up a public version of the dev app so you can take a look.

[zpao]

I think this should be fixed in master thanks to #2503

[m4tthumphrey]

Hey guys, I actually updated to 12.1 today and I tested it before adding the hack and it has been working fine so looks like it was fixed in 0.12.1 somewhere :)

[sophiebits]

0.12.1 just had changes to JSX so if you were on 0.12 before you shouldn't see any difference.