0

Here is the App class. Returns a div or null as the value value in the render function. Shouldn't the app's componentWillUnmount function also execute when returning null? I do not understand that only the componentWillUnmount function of the Header and Body classes is executed.

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value : true};
    }

    componentWillUnmount() {
        console.log('App componentWillUnmount');
    }

    btnClick() {
        this.setState({
            value: ! this.state.value
        });
    }

    render () {
        if(this.state.value) {
            return (
                <div>
                    <button onClick={this.btnClick.bind(this)}>Btn</button>
                    <Header id={this.state.value}></Header>
                    <Body></Body>
                </div>
            )
        } else {
            return null;
        }
    }
}

ReactDOM.render(
    <App id="3"/>,
    document.getElementById('root')
);
박진선
  • 11
  • 2
  • 1
    Since the component App is rendered in document.getElementById('root') it is not unmounted it is still in that div it just that it doesn't have any element to render. When you return null from component it just means that no element/component to render. While incase of Header and body they are rendering in a condition if state.value is true? If its true they are mounted else they are removed from dom(Which is unmount) – Pratap Sharma Feb 28 '20 at 03:18
  • return Does null mean that the app componenter is unmounted? – 박진선 Feb 28 '20 at 04:06
  • return null just mean not to render anything. Empty view. – Pratap Sharma Feb 28 '20 at 04:19

0 Answers0