Stop using componentWillMount

Per facebook/react#7671

src/notebook/components/cell/cell-creator.js

@@ -20,7 +20,7 @@ export default class CellCreator extends React.Component {
     show: false,
   };
 
-  componentWillMount() {
+  componentDidMount() {
     // Listen to the page level mouse move event and manually check for
     // intersection because we don't want the hover region to actually capture
     // any mouse events.  The hover region is an invisible element that

src/notebook/components/cell/cell.js

@@ -47,7 +47,7 @@ export class Cell extends React.Component {
     hoverCell: false,
   };
 
-  componentWillMount() {
+  componentDidMount() {
     // Listen to the page level mouse move event and manually check for
     // intersection because we don't want the hover region to actually capture
     // any mouse events.  The hover region is an invisible element that

src/notebook/components/transforms/plotly.js

@@ -5,29 +5,32 @@ const Plotly = require('plotly.js/dist/plotly');
 const MIMETYPE = 'application/vnd.plotly.v1+json';
 
 export class PlotlyTransform extends React.Component {
-  componentWillMount() {
-    // Handle case of either string to be `JSON.parse`d or pure object
-    let figure = this.props.data;
-
-    if (typeof figure === 'string') {
-      figure = JSON.parse(figure);
-    } else { // assume immutable.js
-      figure = figure.toJS();
-    }
-
-    this.setState({ figure });
+  constructor() {
+    super();
+    this.getFigure = this.getFigure.bind(this);
   }
 
   componentDidMount() {
-    Plotly.newPlot(this.el, this.state.figure.data, this.state.figure.layout);
+    // Handle case of either string to be `JSON.parse`d or pure object
+    const figure = this.getFigure();
+    Plotly.newPlot(this.el, figure.data, figure.layout);
   }
 
   shouldComponentUpdate() {
     return false;
   }
 
+  getFigure() {
+    const figure = this.props.data;
+    if (typeof figure === 'string') {
+      return JSON.parse(figure);
+    }
+    // assume immutable.js
+    return figure.toJS();
+  }
+
   render() {
-    const { layout } = this.state.figure;
+    const { layout } = this.getFigure();
     const style = {};
     if (layout && layout.height && !layout.autosize) {
       style.height = layout.height;