componentWillUnmount failing to fire

[jakearchibald]

componentWillUnmount isn't called if:

• The component in question is within another element in the render
• The render changes to a component, rather than a regular element

Pop this in the repl:

export default class Foo extends Component {
  constructor(...args) {
      super(...args);
      this.state = {showTests: true};
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({showTests: false});
        }, 2000);
    }
    render({ }, { showTests }) {
        if (!showTests) return <AnotherTest/>;

        return (
            <div>
                <Test/>
            </div>
        );
    }
}

class Test extends Component {
  componentDidMount() {
    console.log('test mount');
  }

  componentWillUnmount() {
    console.log('test unmount');
  }

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

class AnotherTest extends Component {
  componentDidMount() {
    console.log('anothertest mount');
  }

  componentWillUnmount() {
    console.log('anothertest unmount');
  }

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

Observe the log, componentWillUnmount does not get called on Test.

Replacing if (!showTests) return <AnotherTest/>; with if (!showTests) return <div><AnotherTest/></div>; is a workaround in the meantime.

[developit]

Hi @jakearchibald - is it possible this is the same issue as #349? If so, I have a fix.

[jakearchibald]

You tell me 😄 .

Rendering isn't broken in the above example, just a lack of componentWillUnmount. It could be the same issue.

[developit]

Looking into it! Thanks for the simple repro.

[developit]

Update: Found the source of the issue. Will publish a fix soon!

[jakearchibald]

Thanks! No rush though, the workaround is working. Was it the same issue as #349?

[developit]

No, though I think he might be running into this one now.

[jakearchibald]

Cheers!