Fix react lifecycle in rendermime renderers using react.

packages/json-extension/package.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "@jupyterlab/rendermime-interfaces": "^1.2.1",
     "@phosphor/coreutils": "^1.3.0",
+    "@phosphor/messaging": "^1.2.2",
     "@phosphor/widgets": "^1.6.0",
     "react": "~16.4.2",
     "react-dom": "~16.4.2",

packages/json-extension/src/index.tsx

@@ -3,6 +3,8 @@
 
 import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
 
+import { Message } from '@phosphor/messaging';
+
 import { Widget } from '@phosphor/widgets';
 
 import * as React from 'react';
@@ -53,6 +55,14 @@ export class RenderedJSON extends Widget implements IRenderMime.IRenderer {
     });
   }
 
+  /**
+   * Called before the widget is detached from the DOM.
+   */
+  protected onBeforeDetach(msg: Message): void {
+    // Unmount the component so it can tear down.
+    ReactDOM.unmountComponentAtNode(this.node);
+  }
+
   private _mimeType: string;
 }
 

packages/vdom-extension/package.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "@jupyterlab/rendermime-interfaces": "^1.2.1",
     "@nteract/transform-vdom": "^1.1.1",
+    "@phosphor/messaging": "^1.2.2",
     "@phosphor/widgets": "^1.6.0",
     "react": "~16.4.2",
     "react-dom": "~16.4.2"

packages/vdom-extension/src/index.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import { Message } from '@phosphor/messaging';
+
 import { Widget } from '@phosphor/widgets';
 
 import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
@@ -46,14 +48,19 @@ export class RenderedVDOM extends Widget implements IRenderMime.IRenderer {
    */
   renderModel(model: IRenderMime.IMimeModel): Promise<void> {
     const data = model.data[this._mimeType] as any;
-    // const metadata = model.metadata[this._mimeType] as any || {};
-    return new Promise<void>((resolve, reject) => {
-      ReactDOM.render(<VDOM data={data} />, this.node, () => {
-        resolve(undefined);
-      });
+    return new Promise<void>(resolve => {
+      ReactDOM.render(<VDOM data={data} />, this.node, resolve);
     });
   }
 
+  /**
+   * Called before the widget is detached from the DOM.
+   */
+  protected onBeforeDetach(msg: Message): void {
+    // Unmount the component so it can tear down.
+    ReactDOM.unmountComponentAtNode(this.node);
+  }
+
   private _mimeType: string;
 }