React: React 16 bug? Warning: Can only update a mounted or mounting component.

[tatomyr]

I'm trying to run this snippet:

class Container extends React.Component {
  constructor() {
    super();
​
    this.state = {
      text: '...',
    };
  }
​
  componentDidMount() {
    fetch(urlThatReturnsSomeText)
      .then(res => res.text())
      .then(text => this.setState({ text }));      
  }
​
  render() {
    return <div>{this.state.text}</div>;
  }
}

It causes the warning. I noticed, that setState triggers componentWillUnmount hook in React 16.
Hooks are consoled in the next order:

componentDidMount
componentWillMount
componentWillUnmount
componentDidMount

In previous version component only was mounting twice (that behavior is also a bit strange to me).
When it comes to only setState without any data fetching everything works fine.

[suhaotian]

I get this too.

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {secondsElapsed: 0};
  }

  tick() {
    this.setState((prevState) => ({
      secondsElapsed: prevState.secondsElapsed + 1
    }));
  }

  componentWillMount(){
    console.log('willMount')
  }
  componentDidMount() {
    console.log('Mount')
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    console.log('Unmount')
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
}

ReactDOM.render(<Timer />, mountNode);

[gaearon]

Both of these reports are a bit hard to understand.

@tatomyr

In your report, nothing prints componentWillMount in the code, but it is there in your log. Can you please provide the full code including the code that does the logging? Preferably as a fiddle or a GitHub project we can clone.

@suhaotian

You have not explained what exactly you are getting, and what you expect to get.

---

Please provide a full runnable example (e.g. in a fiddle) with a description of what you expect to see and what you actually see.

[suhaotian]

@gaearon
Copy above Timer component and pasted it to LiveJSXEditor, console log:

[gaearon]

@suhaotian I still don't understand what is wrong and what you're expecting to see. It might be that our website editor accidentally mounts the component twice (causing it to mount, unmount, and mount again). This doesn't sound like a React bug to me. Can you please create an isolated example demonstrating the React bug?

[suhaotian]

willMount and Mount log twice

[gaearon]

Can you provide me with a fiddle that reproduces the problem? I ran your code locally, and I don't see them printed twice. Again, the React website is not a reliable way to tell how many times something is printed because it is a live editor.

[suhaotian]

Sorry Dan.... It's my bad 😢 . And I test it in jsbin, no problem.

[gaearon]

Sounds great, no worries 😅

@tatomyr Then we'll need a complete example from you. :-)

[tatomyr]

Hmm... It isn't the case in a fiddle. Seems, the problem comes from my webpack settings.

[gaearon]

If you upload a project I could take a look.

[tatomyr]

I've already found the problem. It was totally my fault. I'd configured webpack incorrectly.

[gaearon]

Curious if you could share how this happened. Then we could help the next person who bumps into this :-)

[tatomyr]

I had my client bundle js duplicated and I haven't even noticed it with React 15. Actually, the latest React update revealed that I have some problem. That was the point I initially recognized it as an issue related to React 16 while the update was only pointing to an existing fault.