bug componentWillUnmount is called before componentDidMount

[istarkov]

React 0.14.3
componentWillUnmount is called before componentDidMount, but this must be impossible.

As additional check: calling findDomNode inside componentDidMount causes Invariant Violation: findDOMNode was called on an unmounted component.

code example and output jsbin example

import React, { Component } from 'react';
import { render, findDOMNode } from 'react-dom';

let buggyUid_ = 0;

class BuggyBehavior extends Component {
  constructor() {
    super();
    this.buggy = buggyUid_++;
  }

  componentDidMount() {
    console.log('didMount', this.buggy);
    findDOMNode(this);
  }

  componentWillUnmount() {
    console.log('willUnmount', this.buggy);
  }

  render() {
    return <div />;
  }
}

class WillReceiveUpdater extends Component {
  componentWillReceiveProps(nextProps) {
    if (nextProps.interval[nextProps.prop] !== 3) {
      nextProps.setInterval({...nextProps.interval, ...{[nextProps.prop]: 3}});
    }
  }

  render() {
    return <div />;
  }
}

class Main extends Component {
  constructor() {
    super();
    this.uid_ = 0;
    this.state = {
      data: [],
      interval: {a: 0, b: 0},
      uid: 0,
    };
  }

  componentDidMount() {
    setTimeout(() => this.setState({data: [1, 2, 3], uid: this.uid_++}), 1);
  }

  setInterval = (value) => {
    this.setState({interval: value, uid: this.uid_++});
  }

  render() {
    return (
      <div>
        <BuggyBehavior key={this.state.uid} />
        <WillReceiveUpdater
          prop={'a'}
          interval={this.state.interval}
          setInterval={this.setInterval}
        />
        <WillReceiveUpdater
          prop={'b'}
          interval={this.state.interval}
          setInterval={this.setInterval}
        />
      </div>
    );
  }
}

const App = () => <Main />;

render(
  <App />,
  document.getElementById('root')
);

code output of example above

// didMount 0
// willUnmount 0
// willUnmount 1 !!! WAT didMount is not called yet
// didMount 1
// invariant.js:39 Uncaught Error: Invariant Violation: findDOMNode was called on an unmounted component.

[chicoxyzzy]

Just tried this example and I can confirm this behaviour exists. Is it expected behaviour to prevent memory leaks and clean something from constructor even if component is not mounted yet?

[jimfb]

cc @sebmarkbage @spicyj

[sophiebits]

This might be #2410.

[sompylasar]

@istarkov @chicoxyzzy @spicyj The related issue #2410 has been closed, should this issue be closed, too (if stopped reproducing)?

[sophiebits]

The jsbin is broken in 15.0.2 and fixed in 15.1.0 so almost certainly that, thanks.

[romulof]

I'm experiencing this issue with React 15.5.4 while using React-Modal.

[gaearon]

If you're experiencing an issue please create an example reproducing it. Then we can diagnose it. Thanks!

[romulof]

Sorry, I forgot to attach the example link.

But forget it, the bug was caused by async-reactor incorrect error handling putting React in a erroneous state.