[React Fundamentals] Component Lifecycle - Mounting Usage

The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson you will learn some simple uses for these hooks.

 

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor(){
        super();
        this.state = {
            val: 0
        }
    }
    update(){
        this.setState({val: this.state.val + 1 })
    }
    componentWillMount(){
        console.log(this.state)
        this.setState({
            val: this.state.val * 2
        });
        console.log("Component Will Mount");
    }
    render() {
        console.log("rendering");
        return (
            <div>
                <button onClick={this.update.bind(this)}>{this.state.val}</button>
            </div>
        )
    }
    componentDidMount(){
        this.inc = setInterval(this.update.bind(this), 500);
        console.log("Component Did Mount");
    }
    componentWillUnmount(){
        clearInterval(this.inc);
        console.log("Component will unmount");
    }
}

export default class Wrapper extends React.Component{
    constructor(){
        super();
    }
    mount(){
        ReactDOM.render(<App />, document.getElementById('a'));
    }
    unmount(){
        // Unmount a dom node 
        ReactDOM.unmountComponentAtNode(document.getElementById('a'))
    }
    render() {
        return (
            <div>
                <button onClick={this.mount.bind(this)}>Mount</button>
                <button onClick={this.unmount.bind(this)}>Unmount</button>
                <div id="a"></div>
            </div>
        );
    }

}