How to properly use componentWillUnmount() in ReactJs

Question

From the official tutorial:

componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any nece

Answer 1

When creating Components with React, not every library integrates well with it's philosophy of wanting to manage the DOM.

An example of this would be using a graphing library like c3. c3 expects to be given a DOM node and will create / manage it's own markup away from React. In this case you should manage cleaning up any elements created by this library when your component is removed from the DOM.

import React, { Component, PropTypes } from 'react';
import c3 from 'c3';

export default class Graph extends Component {

  componentDidMount () {
    this._initGraph();
  }

  componentWillUnmount () {
    this.graph = this.graph.destroy();
  }

  _initGraph () {
    this.graph = c3.generate({
      bindto: this.refs.graph
    });
  }

  render () {
    return (
      

        

      
    );
  }
}

Here React creates a single div as a placeholder for c3 to add it's content. This process is kicked off in the componentDidMount lifecycle hook, and cleaned up again in componentWillUnmount.