React@16 componentWillUnmount is not triggered in time

[gera2ld]

When using React@16, componentWillUnmount of child components will not be triggered until the modal is destroyed or it's visible with different children.

For example:

import React from 'react';
import ReactDOM from 'react-dom';
import { Modal } from 'antd-mobile';

class Content extends React.Component {
  componentWillMount() {
    console.log('mount');
  }

  componentWillUnmount() {
    console.log('unmount'); // this line is not executed
  }

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

class App extends React.Component {
  state = {
    show: false,
  }

  componentDidMount() {
    setTimeout(() => { this.setState({ show: true }); }, 1000);
    setTimeout(() => { this.setState({ show: false }); }, 2000);
  }

  render() {
    return (
      <Modal visible={this.state.show}>
        <Content />
      </Modal>
    );
  }
}

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

Expected result

Both mount and unmount should be logged.

Actual result

Only mount is logged.

[doxiaodong]

Why need unmount Content ?

[gera2ld]

Because unmount triggers in React@15. I think they should keep consistent.

Example usage:

<Modal visible={visible}>
  <ModalCounter />
</Modal>

ModalCounter can be used to count how many modals are available to a user at the moment.

By using React@16 with antd, I have to change the code like this:

<Modal visible={visible}>
  {visible && <ModalCounter />}
</Modal>

This has to be done EVERYWHERE, and I can't see any benefits. Why would we want to see what the modal had last time? Can we add an option to disable this cache behavior?

[doxiaodong]

I see.

[gera2ld]

Any updates?