diff --git a/x-pack/plugins/canvas/public/components/arg_form/arg_template_form.js b/x-pack/plugins/canvas/public/components/arg_form/arg_template_form.js
index 4cc2df483893..c11f6d0c78bb 100644
--- a/x-pack/plugins/canvas/public/components/arg_form/arg_template_form.js
+++ b/x-pack/plugins/canvas/public/components/arg_form/arg_template_form.js
@@ -28,8 +28,6 @@ class ArgTemplateFormComponent extends React.Component {
     errorTemplate: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
   };
 
-  static domNode = null;
-
   componentWillUpdate(prevProps) {
     //see if error state changed
     if (this.props.error !== prevProps.error) {
@@ -38,23 +36,25 @@ class ArgTemplateFormComponent extends React.Component {
   }
   componentDidUpdate() {
     if (this.props.error) {
-      return this.renderErrorTemplate();
+      return this._renderErrorTemplate();
     }
-    this.renderTemplate(this.domNode);
+    this._renderTemplate(this._domNode);
   }
 
   componentWillUnmount() {
     this.props.handlers.destroy();
   }
 
-  renderTemplate = domNode => {
+  _domNode = null;
+
+  _renderTemplate = domNode => {
     const { template, argumentProps, handlers } = this.props;
     if (template) {
       return template(domNode, argumentProps, handlers);
     }
   };
 
-  renderErrorTemplate = () => {
+  _renderErrorTemplate = () => {
     const { errorTemplate, argumentProps } = this.props;
     return React.createElement(errorTemplate, argumentProps);
   };
@@ -63,7 +63,7 @@ class ArgTemplateFormComponent extends React.Component {
     const { template, error } = this.props;
 
     if (error) {
-      return this.renderErrorTemplate();
+      return this._renderErrorTemplate();
     }
 
     if (!template) {
@@ -73,8 +73,8 @@ class ArgTemplateFormComponent extends React.Component {
     return (
       <RenderToDom
         render={domNode => {
-          this.domNode = domNode;
-          this.renderTemplate(domNode);
+          this._domNode = domNode;
+          this._renderTemplate(domNode);
         }}
       />
     );
diff --git a/x-pack/plugins/canvas/public/components/dom_preview/dom_preview.js b/x-pack/plugins/canvas/public/components/dom_preview/dom_preview.js
index 51e24c98036f..172792b429fc 100644
--- a/x-pack/plugins/canvas/public/components/dom_preview/dom_preview.js
+++ b/x-pack/plugins/canvas/public/components/dom_preview/dom_preview.js
@@ -14,51 +14,48 @@ export class DomPreview extends React.Component {
     height: PropTypes.number.isRequired,
   };
 
-  constructor(props) {
-    super(props);
-    this.container = null;
-    this.content = null;
-    this.observer = null;
-    this.original = null;
-    this.updateTimeout = null;
-  }
-
   componentDidMount() {
     this.update();
   }
 
   componentWillUnmount() {
-    clearTimeout(this.updateTimeout);
-    this.observer && this.observer.disconnect(); // observer not guaranteed to exist
+    clearTimeout(this._updateTimeout);
+    this._observer && this._observer.disconnect(); // observer not guaranteed to exist
   }
 
+  _container = null;
+  _content = null;
+  _observer = null;
+  _original = null;
+  _updateTimeout = null;
+
   update = () => {
-    if (!this.content || !this.container) {
+    if (!this._content || !this._container) {
       return;
     }
 
     const currentOriginal = document.querySelector(`#${this.props.elementId}`);
-    const originalChanged = currentOriginal !== this.original;
+    const originalChanged = currentOriginal !== this._original;
     if (originalChanged) {
-      this.observer && this.observer.disconnect();
-      this.original = currentOriginal;
+      this._observer && this._observer.disconnect();
+      this._original = currentOriginal;
       if (currentOriginal) {
         const slowUpdate = debounce(this.update, 100);
-        this.observer = new MutationObserver(slowUpdate);
+        this._observer = new MutationObserver(slowUpdate);
         // configuration of the observer
         const config = { attributes: true, childList: true, subtree: true };
         // pass in the target node, as well as the observer options
-        this.observer.observe(this.original, config);
+        this._observer.observe(this._original, config);
       } else {
-        clearTimeout(this.updateTimeout); // to avoid the assumption that we fully control when `update` is called
-        this.updateTimeout = setTimeout(this.update, 30);
+        clearTimeout(this._updateTimeout); // to avoid the assumption that we fully control when `update` is called
+        this._updateTimeout = setTimeout(this.update, 30);
         return;
       }
     }
 
-    const thumb = this.original.cloneNode(true);
+    const thumb = this._original.cloneNode(true);
 
-    const originalStyle = window.getComputedStyle(this.original, null);
+    const originalStyle = window.getComputedStyle(this._original, null);
     const originalWidth = parseInt(originalStyle.getPropertyValue('width'), 10);
     const originalHeight = parseInt(originalStyle.getPropertyValue('height'), 10);
 
@@ -66,16 +63,16 @@ export class DomPreview extends React.Component {
     const scale = thumbHeight / originalHeight;
     const thumbWidth = originalWidth * scale;
 
-    if (this.content.hasChildNodes()) {
-      this.content.removeChild(this.content.firstChild);
+    if (this._content.hasChildNodes()) {
+      this._content.removeChild(this._content.firstChild);
     }
-    this.content.appendChild(thumb);
+    this._content.appendChild(thumb);
 
-    this.content.style.cssText = `transform: scale(${scale}); transform-origin: top left;`;
-    this.container.style.cssText = `width: ${thumbWidth}px; height: ${thumbHeight}px;`;
+    this._content.style.cssText = `transform: scale(${scale}); transform-origin: top left;`;
+    this._container.style.cssText = `width: ${thumbWidth}px; height: ${thumbHeight}px;`;
 
     // Copy canvas data
-    const originalCanvas = this.original.querySelectorAll('canvas');
+    const originalCanvas = this._original.querySelectorAll('canvas');
     const thumbCanvas = thumb.querySelectorAll('canvas');
 
     // Cloned canvas elements are blank and need to be explicitly redrawn
@@ -90,13 +87,13 @@ export class DomPreview extends React.Component {
     return (
       <div
         ref={container => {
-          this.container = container;
+          this._container = container;
         }}
         className="dom-preview"
       >
         <div
           ref={content => {
-            this.content = content;
+            this._content = content;
           }}
         />
       </div>
diff --git a/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.js b/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.js
index 41e8461137f6..f1385152b7cb 100644
--- a/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.js
+++ b/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.js
@@ -34,8 +34,6 @@ export class RenderWithFn extends React.Component {
     reuseNode: false,
   };
 
-  static domNode = null;
-
   componentDidMount() {
     this.firstRender = true;
     this.renderTarget = null;
@@ -45,20 +43,20 @@ export class RenderWithFn extends React.Component {
     const newRenderFunction = renderFn !== this.props.renderFn;
 
     if (newRenderFunction) {
-      this.resetRenderTarget(this.domNode);
+      this._resetRenderTarget(this._domNode);
     }
   }
 
   shouldComponentUpdate(prevProps) {
-    return !isEqual(this.props.size, prevProps.size) || this.shouldFullRerender(prevProps);
+    return !isEqual(this.props.size, prevProps.size) || this._shouldFullRerender(prevProps);
   }
 
   componentDidUpdate(prevProps) {
     const { handlers, size } = this.props;
     // Config changes
-    if (this.shouldFullRerender(prevProps)) {
+    if (this._shouldFullRerender(prevProps)) {
       // This should be the only place you call renderFn besides the first time
-      this.callRenderFn();
+      this._callRenderFn();
     }
 
     // Size changes
@@ -71,11 +69,13 @@ export class RenderWithFn extends React.Component {
     this.props.handlers.destroy();
   }
 
-  callRenderFn = () => {
+  _domNode = null;
+
+  _callRenderFn = () => {
     const { handlers, config, renderFn, reuseNode, name: functionName } = this.props;
     // TODO: We should wait until handlers.done() is called before replacing the element content?
     if (!reuseNode || !this.renderTarget) {
-      this.resetRenderTarget(this.domNode);
+      this._resetRenderTarget(this._domNode);
     }
     // else if (!firstRender) handlers.destroy();
 
@@ -91,7 +91,7 @@ export class RenderWithFn extends React.Component {
     }
   };
 
-  resetRenderTarget = domNode => {
+  _resetRenderTarget = domNode => {
     const { handlers } = this.props;
 
     if (!domNode) {
@@ -108,18 +108,18 @@ export class RenderWithFn extends React.Component {
     }
 
     this.firstRender = true;
-    this.renderTarget = this.createRenderTarget();
+    this.renderTarget = this._createRenderTarget();
     domNode.appendChild(this.renderTarget);
   };
 
-  createRenderTarget = () => {
+  _createRenderTarget = () => {
     const div = document.createElement('div');
     div.style.width = '100%';
     div.style.height = '100%';
     return div;
   };
 
-  shouldFullRerender = prevProps => {
+  _shouldFullRerender = prevProps => {
     // TODO: What a shitty hack. None of these props should update when you move the element.
     // This should be fixed at a higher level.
     return (
@@ -142,8 +142,8 @@ export class RenderWithFn extends React.Component {
         <RenderToDom
           style={{ height: '100%', width: '100%' }}
           render={domNode => {
-            this.domNode = domNode;
-            this.callRenderFn();
+            this._domNode = domNode;
+            this._callRenderFn();
           }}
         />
       </div>