Mounting basics

when a component is added or removed from the DOM, this is called mounting / unmounting the component

sidenote: super() gets us the context

create an App component with the following code:

class App extends React.Component {
  constructor() {
    super();
    this.state = { val: 0 };
    this.update = this.update.bind(this);
  }

  update(e) {
    this.setState({ val: this.state.val + 1 })
  }

  render() {
    console.log('rendering!')
    return <button onClick={this.update}>{this.state.val}</button>
  }
}

we can see if we click on the button, each time we do it will increase by 1 and the render method is called.

next lets add a method called componentWillMount(), which will call each time our component is fully mounted and garenteed to make it into the DOM. So it is called once, when the component is first rendered.

componentWillMount() {
  console.log('mounting')
}

next is componentDidMount() which is called once our component is placed into the DOM.

last is componentWillUnmount() which is called once the component is removed from the DOM.

full example of the mounting methods being used:


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


class App extends React.Component {
  constructor() {
    super();
    this.state = { val: 0 };
    this.update = this.update.bind(this);
  }

  update(e) {
    this.setState({ val: this.state.val + 1 })
  }

  componentWillMount() {
    console.log('mounting')
  }

  componentDidMount() {
    console.log('mounted!')
  }

  componentWillUnmount() {
    console.log('bye')
  }

  render() {
    console.log('rendering!')
    return <button onClick={this.update}>{this.state.val}</button>
  }
}


class Wrapper extends React.Component {

  constructor() {
    super();
  }

  mount() {
    ReactDOM.render(<App />, document.getElementById('a'))
  }

  unmount() {
    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>
    )
  }
}


export default Wrapper;

Mounting Usage

full example of utilizing each stage of the mounting cycle:


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


class App extends React.Component {
  constructor() {
    super();
    this.state = { val: 0 };
    this.update = this.update.bind(this);
  }

  update(e) {
    this.setState({ val: this.state.val + 1 })
  }

  componentWillMount() {
    this.setState({m: 2})
  }

  componentDidMount() {
    this.inc = setInterval(this.update, 500)
  }

  componentWillUnmount() {
    clearInterval(this.inc)
  }

  render() {
    console.log('rendering!')
    return (
      <button onClick={this.update}>
        {this.state.val * this.state.m}
      </button>
    )
  }
}


class Wrapper extends React.Component {

  constructor() {
    super();
  }

  mount() {
    ReactDOM.render(<App />, document.getElementById('a'))
  }

  unmount() {
    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>
    )
  }
}


export default Wrapper;

Updating

componentWillRecieveProps(nextProps) is called when …

shouldComponentUpdate(nextProps, nextState) can decide weather or not we want our component to update or not

componentDidUpdate(prevProps, prevState)