diff --git a/src/components/BooleanEditor/BooleanEditor.react.js b/src/components/BooleanEditor/BooleanEditor.react.js
index b68316f7ad..38606d2286 100644
--- a/src/components/BooleanEditor/BooleanEditor.react.js
+++ b/src/components/BooleanEditor/BooleanEditor.react.js
@@ -20,6 +20,7 @@ export default class BooleanEditor extends React.Component {
 
     this.checkExternalClick = this.checkExternalClick.bind(this);
     this.handleKey = this.handleKey.bind(this);
+    this.inputRef = React.createRef();
   }
 
   componentDidMount() {
@@ -33,7 +34,7 @@ export default class BooleanEditor extends React.Component {
   }
 
   checkExternalClick(e) {
-    if (!hasAncestor(e.target, this.refs.input)) {
+    if (!hasAncestor(e.target, this.inputRef.current)) {
       this.props.onCommit(this.state.value);
     }
   }
@@ -46,7 +47,7 @@ export default class BooleanEditor extends React.Component {
 
   render() {
     return (
-      <div ref='input' style={{ minWidth: this.props.width }} className={styles.editor}>
+      <div ref={this.inputRef} style={{ minWidth: this.props.width }} className={styles.editor}>
         <Toggle
           type={Toggle.Types.TRUE_FALSE}
           value={this.state.value}
diff --git a/src/components/CategoryList/CategoryList.react.js b/src/components/CategoryList/CategoryList.react.js
index 11c3fee27b..6a2ff95bee 100644
--- a/src/components/CategoryList/CategoryList.react.js
+++ b/src/components/CategoryList/CategoryList.react.js
@@ -7,13 +7,17 @@
  */
 import PropTypes from 'lib/PropTypes';
 import React     from 'react';
-import ReactDOM  from 'react-dom';
 import styles    from 'components/CategoryList/CategoryList.scss';
 import { Link }  from 'react-router-dom';
 
 export default class CategoryList extends React.Component {
+  constructor() {
+    super();
+    this.listWrapperRef = React.createRef();
+  }
+
   componentDidMount() {
-    let listWrapper = ReactDOM.findDOMNode(this.refs.listWrapper);
+    let listWrapper = this.listWrapperRef.current;
     if (listWrapper) {
       this.highlight = document.createElement('div');
       this.highlight.className = styles.highlight;
@@ -52,7 +56,7 @@ export default class CategoryList extends React.Component {
       return null;
     }
     return (
-      <div ref='listWrapper' className={styles.class_list}>
+      <div ref={this.listWrapperRef} className={styles.class_list}>
         {this.props.categories.map((c) => {
           let id = c.id || c.name;
           let count = c.count;
diff --git a/src/components/CodeSnippet/CodeSnippet.react.js b/src/components/CodeSnippet/CodeSnippet.react.js
index 605d13058e..85b57bbe89 100644
--- a/src/components/CodeSnippet/CodeSnippet.react.js
+++ b/src/components/CodeSnippet/CodeSnippet.react.js
@@ -13,6 +13,11 @@ import './CodeSnippet.css';
 import 'prismjs/plugins/line-numbers/prism-line-numbers';
 
 export default class CodeSnippet extends React.Component {
+  constructor() {
+    super();
+    this.codeRef = React.createRef();
+  }
+
   componentDidMount() {
     this._highlight();
   }
@@ -22,7 +27,7 @@ export default class CodeSnippet extends React.Component {
   }
 
   _highlight() {
-    Prism.highlightElement(this.refs.code);
+    Prism.highlightElement(this.codeRef.current);
   }
 
   render() {
@@ -34,7 +39,7 @@ export default class CodeSnippet extends React.Component {
     let pageStyle = fullPage ? { minHeight: 'calc(100vh - 96px)'} : {};
     return (
       <pre style={{ margin: 0, ...pageStyle}} className={classes.join(' ')}>
-        <code style={pageStyle} ref='code'>{this.props.source}</code>
+        <code style={pageStyle} ref={this.codeRef}>{this.props.source}</code>
       </pre>
     );
   }
diff --git a/src/components/DateTimeEditor/DateTimeEditor.react.js b/src/components/DateTimeEditor/DateTimeEditor.react.js
index 79ad194a22..f2af5dc61c 100644
--- a/src/components/DateTimeEditor/DateTimeEditor.react.js
+++ b/src/components/DateTimeEditor/DateTimeEditor.react.js
@@ -23,6 +23,8 @@ export default class DateTimeEditor extends React.Component {
 
     this.checkExternalClick = this.checkExternalClick.bind(this);
     this.handleKey = this.handleKey.bind(this);
+    this.inputRef = React.createRef();
+    this.editorRef = React.createRef();
   }
 
   componentWillReceiveProps(props) {
@@ -31,16 +33,16 @@ export default class DateTimeEditor extends React.Component {
 
   componentDidMount() {
     document.body.addEventListener('click', this.checkExternalClick);
-    this.refs.input.addEventListener('keypress', this.handleKey);
+    this.inputRef.current.addEventListener('keypress', this.handleKey);
   }
 
   componentWillUnmount() {
     document.body.removeEventListener('click', this.checkExternalClick);
-    this.refs.input.removeEventListener('keypress', this.handleKey);
+    this.inputRef.current.removeEventListener('keypress', this.handleKey);
   }
 
   checkExternalClick(e) {
-    if (!hasAncestor(e.target, this.refs.editor)) {
+    if (!hasAncestor(e.target, this.editorRef.current)) {
       this.props.onCommit(this.state.value);
     }
   }
@@ -100,11 +102,11 @@ export default class DateTimeEditor extends React.Component {
     }
 
     return (
-      <div ref='editor' style={{ width: this.props.width }} className={styles.editor}>
+      <div ref={this.editorRef} style={{ width: this.props.width }} className={styles.editor}>
         <input
           autoFocus
           type='text'
-          ref='input'
+          ref={this.inputRef}
           value={this.state.text}
           onFocus={e => e.target.select()}
           onClick={this.toggle.bind(this)}
diff --git a/src/components/FileEditor/FileEditor.react.js b/src/components/FileEditor/FileEditor.react.js
index 7e438a995a..5c2b507026 100644
--- a/src/components/FileEditor/FileEditor.react.js
+++ b/src/components/FileEditor/FileEditor.react.js
@@ -21,6 +21,8 @@ export default class FileEditor extends React.Component {
     this.checkExternalClick = this.checkExternalClick.bind(this);
     this.handleKey = this.handleKey.bind(this);
     this.removeFile = this.removeFile.bind(this);
+    this.inputRef = React.createRef();
+    this.fileInputRef = React.createRef();
   }
 
   componentDidMount() {
@@ -31,7 +33,7 @@ export default class FileEditor extends React.Component {
       fileInputElement.click();
     }
   }
-  
+
   componentWillUnmount() {
     document.body.removeEventListener('click', this.checkExternalClick);
     document.body.removeEventListener('keypress', this.handleKey);
@@ -39,7 +41,7 @@ export default class FileEditor extends React.Component {
 
   checkExternalClick(e) {
     const { onCancel } = this.props;
-    if (!hasAncestor(e.target, this.refs.input) && onCancel) {
+    if (!hasAncestor(e.target, this.inputRef.current) && onCancel) {
       onCancel();
     }
   }
@@ -61,7 +63,7 @@ export default class FileEditor extends React.Component {
   }
 
   removeFile() {
-    this.refs.fileInput.value = '';
+    this.fileInputRef.current.value = '';
     this.props.onCommit(undefined);
   }
 
@@ -76,9 +78,9 @@ export default class FileEditor extends React.Component {
   render() {
     const file = this.props.value;
     return (
-      <div ref='input' style={{ minWidth: this.props.width, display: 'none' }} className={styles.editor}>
+      <div ref={this.inputRef.current} style={{ minWidth: this.props.width, display: 'none' }} className={styles.editor}>
         <a className={styles.upload}>
-          <input ref='fileInput' id='fileInput' type='file' onChange={this.handleChange.bind(this)} />
+          <input ref={this.fileInputRef} id='fileInput' type='file' onChange={this.handleChange.bind(this)} />
           <span>{file ? 'Replace file' : 'Upload file'}</span>
         </a>
       </div>
diff --git a/src/components/GeoPointEditor/GeoPointEditor.react.js b/src/components/GeoPointEditor/GeoPointEditor.react.js
index a91c708cb5..597bc529ee 100644
--- a/src/components/GeoPointEditor/GeoPointEditor.react.js
+++ b/src/components/GeoPointEditor/GeoPointEditor.react.js
@@ -22,15 +22,18 @@ export default class GeoPointEditor extends React.Component {
     this.checkExternalClick = this.checkExternalClick.bind(this);
     this.handleKeyLatitude = this.handleKeyLatitude.bind(this);
     this.handleKeyLongitude = this.handleKeyLongitude.bind(this);
+
+    this.latitudeRef = React.createRef();
+    this.longitudeRef = React.createRef();
   }
 
   componentDidMount() {
     if (!this.props.disableAutoFocus) {
-      this.refs.latitude.focus();
+      this.latitudeRef.current.focus();
     }
-    this.refs.latitude.setSelectionRange(0, String(this.state.latitude).length);
-    this.refs.latitude.addEventListener('keypress', this.handleKeyLatitude);
-    this.refs.longitude.addEventListener('keypress', this.handleKeyLongitude);
+    this.latitudeRef.current.setSelectionRange(0, String(this.state.latitude).length);
+    this.latitudeRef.current.addEventListener('keypress', this.handleKeyLatitude);
+    this.longitudeRef.current.addEventListener('keypress', this.handleKeyLongitude);
   }
 
   componentWillReceiveProps(props) {
@@ -45,8 +48,8 @@ export default class GeoPointEditor extends React.Component {
   }
 
   componentWillUnmount() {
-    this.refs.latitude.removeEventListener('keypress', this.handleKeyLatitude);
-    this.refs.longitude.removeEventListener('keypress', this.handleKeyLongitude);
+    this.latitudeRef.current.removeEventListener('keypress', this.handleKeyLatitude);
+    this.longitudeRef.current.removeEventListener('keypress', this.handleKeyLongitude);
   }
 
   checkExternalClick() {
@@ -55,8 +58,8 @@ export default class GeoPointEditor extends React.Component {
       // check if activeElement is something else from input fields,
       // to avoid commiting new value on every switch of focus beetween latitude and longitude fields
       if (
-        document.activeElement !== this.refs.latitude &&
-        document.activeElement !== this.refs.longitude
+        document.activeElement !== this.latitudeRef.current &&
+        document.activeElement !== this.longitudeRef.current
       ) {
         this.commitValue();
       }
@@ -65,8 +68,8 @@ export default class GeoPointEditor extends React.Component {
 
   handleKeyLatitude(e) {
     if (e.keyCode === 13 || e.keyCode === 44) {
-      this.refs.longitude.focus();
-      this.refs.longitude.setSelectionRange(0, String(this.state.longitude).length);
+      this.longitudeRef.current.focus();
+      this.longitudeRef.current.setSelectionRange(0, String(this.state.longitude).length);
     }
   }
 
@@ -112,15 +115,15 @@ export default class GeoPointEditor extends React.Component {
 
             if (values[1].length <= 0 || !validateNumeric(values[1])) {
               this.setState({ latitude: values[0] });
-              this.refs.longitude.focus();
-              this.refs.longitude.setSelectionRange(0, String(this.state.longitude).length);
+              this.longitudeRef.current.focus();
+              this.longitudeRef.current.setSelectionRange(0, String(this.state.longitude).length);
               return;
             }
 
             if (validateNumeric(values[1])) {
               this.setState({ latitude: values[0] });
               this.setState({ longitude: values[1] });
-              this.refs.longitude.focus();
+              this.longitudeRef.current.focus();
               return;
             }
           }
@@ -130,14 +133,14 @@ export default class GeoPointEditor extends React.Component {
       this.setState({ [target]: validateNumeric(value) ? value : this.state[target] });
     };
     return (
-      <div ref='input' style={{ width: this.props.width, ...this.props.style }} className={styles.editor}>
+      <div style={{ width: this.props.width, ...this.props.style }} className={styles.editor}>
         <input
-          ref='latitude'
+          ref={this.latitudeRef}
           value={this.state.latitude}
           onBlur={this.checkExternalClick}
           onChange={onChange.bind(this, 'latitude')} />
         <input
-          ref='longitude'
+          ref={this.longitudeRef}
           value={this.state.longitude}
           onBlur={this.checkExternalClick}
           onChange={onChange.bind(this, 'longitude')} />
diff --git a/src/components/Loader/Loader.react.js b/src/components/Loader/Loader.react.js
index 9159838ddd..277972f68f 100644
--- a/src/components/Loader/Loader.react.js
+++ b/src/components/Loader/Loader.react.js
@@ -52,6 +52,13 @@ function getPosition(t) {
 }
 
 export default class Loader extends React.Component {
+  constructor() {
+    super();
+    this.dot0Ref = React.createRef();
+    this.dot1Ref = React.createRef();
+    this.dot2Ref = React.createRef();
+  }
+
   componentDidMount() {
     this.mounted = true;
     this.mountTime = new Date().getTime();
@@ -69,21 +76,21 @@ export default class Loader extends React.Component {
     let delta = new Date() - this.mountTime;
     let t = (delta / DURATION) % 1;
     let pos = getPosition(t);
-    let style = this.refs.dot0.style;
+    let style = this.dot0Ref.current.style;
     style.left = pos.x + 'px';
     style.top = pos.y + 'px';
     style.width = style.height = getRadius(t) + 'px';
 
     t = (delta / DURATION + 0.4) % 1;
     pos = getPosition(t);
-    style = this.refs.dot1.style;
+    style = this.dot1Ref.current.style;
     style.left = pos.x + 'px';
     style.top = pos.y + 'px';
     style.width = style.height = getRadius(t) + 'px';
 
     t = (delta / DURATION + 0.8) % 1;
     pos = getPosition(t);
-    style = this.refs.dot2.style;
+    style = this.dot2Ref.current.style;
     style.left = pos.x + 'px';
     style.top = pos.y + 'px';
     style.width = style.height = getRadius(t) + 'px';
@@ -98,9 +105,9 @@ export default class Loader extends React.Component {
     }
     return (
       <div className={classes}>
-        <div ref='dot0' />
-        <div ref='dot1' />
-        <div ref='dot2' />
+        <div ref={this.dot0Ref} />
+        <div ref={this.dot1Ref} />
+        <div ref={this.dot2Ref} />
       </div>
     );
   }
diff --git a/src/components/LoginForm/LoginForm.react.js b/src/components/LoginForm/LoginForm.react.js
index e651658ff1..df824a4b11 100644
--- a/src/components/LoginForm/LoginForm.react.js
+++ b/src/components/LoginForm/LoginForm.react.js
@@ -13,11 +13,15 @@ import { verticalCenter } from 'stylesheets/base.scss';
 
 // Class-style component, because we need refs
 export default class LoginForm extends React.Component {
+  constructor() {
+    super();
+    this.formRef = React.createRef();
+  }
   render() {
     return (
       <div className={styles.login} style={{ marginTop: this.props.marginTop || '-220px' }}>
         <Icon width={80} height={80} name='infinity' fill='#093A59' />
-        <form method='post' ref='form' action={this.props.endpoint} className={styles.form}>
+        <form method='post' ref={this.formRef} action={this.props.endpoint} className={styles.form}>
           <CSRFInput />
           <div className={styles.header}>{this.props.header}</div>
           {this.props.children}
@@ -34,7 +38,7 @@ export default class LoginForm extends React.Component {
                 return;
               }
               this.props.formSubmit();
-              this.refs.form.submit()
+              this.formRef.current.submit()
             }}
             className={styles.submit}
             value={this.props.action} />
diff --git a/src/components/NumberEditor/NumberEditor.react.js b/src/components/NumberEditor/NumberEditor.react.js
index 1f3b579e91..0a63275272 100644
--- a/src/components/NumberEditor/NumberEditor.react.js
+++ b/src/components/NumberEditor/NumberEditor.react.js
@@ -19,10 +19,11 @@ export default class NumberEditor extends React.Component {
 
     this.checkExternalClick = this.checkExternalClick.bind(this);
     this.handleKey = this.handleKey.bind(this);
+    this.inputRef = React.createRef();
   }
 
   componentDidMount() {
-    this.refs.input.setSelectionRange(0, String(this.state.value).length);
+    this.inputRef.current.setSelectionRange(0, String(this.state.value).length);
     document.body.addEventListener('click', this.checkExternalClick);
     document.body.addEventListener('keypress', this.handleKey);
   }
@@ -33,7 +34,7 @@ export default class NumberEditor extends React.Component {
   }
 
   checkExternalClick(e) {
-    if (e.target !== this.refs.input) {
+    if (e.target !== this.inputRef.current) {
       this.commitValue()
     }
   }
@@ -64,7 +65,7 @@ export default class NumberEditor extends React.Component {
     return (
       <div style={{ width: this.props.width }} className={styles.editor}>
         <input
-          ref='input'
+          ref={this.inputRef}
           value={this.state.value}
           onChange={onChange} />
       </div>
diff --git a/src/components/Range/Range.react.js b/src/components/Range/Range.react.js
index ee9b3d3e2a..c1e6b3833f 100644
--- a/src/components/Range/Range.react.js
+++ b/src/components/Range/Range.react.js
@@ -16,11 +16,12 @@ export default class Range extends React.Component {
   constructor(props) {
     super();
     this.state = { width: props.width };
+    this.metricsRef = React.createRef();
   }
 
   componentDidMount() {
     if (!this.props.width) {
-      this.setState({ width: this.refs.metrics.clientWidth });
+      this.setState({ width: this.metricsRef.current.clientWidth });
     }
   }
 
@@ -64,7 +65,7 @@ export default class Range extends React.Component {
     return (
       <div
         style={wrapperStyle}
-        ref='metrics'
+        ref={this.metricsRef}
         className={[styles.range, input].join(' ')}>
         {tracker}
         <input
diff --git a/src/components/Sidebar/FooterMenu.react.js b/src/components/Sidebar/FooterMenu.react.js
index 594bc0b8f5..af09f3abf0 100644
--- a/src/components/Sidebar/FooterMenu.react.js
+++ b/src/components/Sidebar/FooterMenu.react.js
@@ -21,10 +21,11 @@ export default class FooterMenu extends React.Component {
       show: false,
       position: null,
     };
+    this.moreRef = React.createRef();
   }
 
   toggle() {
-    let pos = Position.inWindow(this.refs.more);
+    let pos = Position.inWindow(this.moreRef.current);
     pos.x += 24;
     this.setState({
       show: true,
@@ -59,7 +60,7 @@ export default class FooterMenu extends React.Component {
       );
     }
     return (
-      <a onClick={this.toggle.bind(this)} ref='more' className={styles.more}>
+      <a onClick={this.toggle.bind(this)} ref={this.moreRef} className={styles.more}>
         <Icon height={24} width={24} name='ellipses' />
         {content}
       </a>
diff --git a/src/components/StringEditor/StringEditor.react.js b/src/components/StringEditor/StringEditor.react.js
index d4859082a3..58ccda18e2 100644
--- a/src/components/StringEditor/StringEditor.react.js
+++ b/src/components/StringEditor/StringEditor.react.js
@@ -18,10 +18,11 @@ export default class StringEditor extends React.Component {
 
     this.checkExternalClick = this.checkExternalClick.bind(this);
     this.handleKey = this.handleKey.bind(this);
+    this.inputRef = React.createRef();
   }
 
   componentDidMount() {
-    this.refs.input.setSelectionRange(0, this.state.value.length);
+    this.inputRef.current.setSelectionRange(0, this.state.value.length);
     document.body.addEventListener('click', this.checkExternalClick);
     document.body.addEventListener('keypress', this.handleKey);
   }
@@ -32,7 +33,7 @@ export default class StringEditor extends React.Component {
   }
 
   checkExternalClick(e) {
-    if (e.target !== this.refs.input) {
+    if (e.target !== this.inputRef.current) {
       this.props.onCommit(this.state.value);
     }
   }
@@ -57,7 +58,7 @@ export default class StringEditor extends React.Component {
       return (
         <div className={styles.editor}>
           <textarea
-            ref='input'
+            ref={this.inputRef}
             value={this.state.value}
             onChange={onChange}
             style={style} />
@@ -67,7 +68,7 @@ export default class StringEditor extends React.Component {
     return (
       <div style={{ width: this.props.width }} className={styles.editor}>
         <input
-          ref='input'
+          ref={this.inputRef}
           value={this.state.value}
           onChange={onChange} />
       </div>
diff --git a/src/dashboard/Account/AccountLinkField.react.js b/src/dashboard/Account/AccountLinkField.react.js
index ff6489a19b..6cc7c9e143 100644
--- a/src/dashboard/Account/AccountLinkField.react.js
+++ b/src/dashboard/Account/AccountLinkField.react.js
@@ -16,10 +16,14 @@ const DEFAULT_LABEL_WIDTH = 56;
 
 // We use refs, so can't be stateless component
 export class AccountLinkField extends React.Component {
+  constructor() {
+    super();
+    this.modifyRef = React.createRef();
+  }
   render() {
     return (
       <div>
-        <form ref='modify'
+        <form ref={this.modifyRef}
               method='post'
               action={this.props.metadata.linked ?
                       this.props.metadata.deauthorize_url :
@@ -33,7 +37,7 @@ export class AccountLinkField extends React.Component {
           value={this.props.metadata.linked ?
                  'Unlink ' + this.props.serviceName :
                  'Connect ' + this.props.serviceName}
-          onClick={() => this.refs.modify.submit()} />}/>
+          onClick={() => this.modifyRef.current.submit()} />}/>
       </div>
     );
   }
diff --git a/src/dashboard/Analytics/Explorer/Explorer.react.js b/src/dashboard/Analytics/Explorer/Explorer.react.js
index b92034bab0..7be72bc325 100644
--- a/src/dashboard/Analytics/Explorer/Explorer.react.js
+++ b/src/dashboard/Analytics/Explorer/Explorer.react.js
@@ -23,7 +23,6 @@ import LoaderContainer           from 'components/LoaderContainer/LoaderContaine
 import Parse                     from 'parse';
 import prettyNumber              from 'lib/prettyNumber';
 import React                     from 'react';
-import ReactDOM                  from 'react-dom';
 import styles                    from 'dashboard/Analytics/Explorer/Explorer.scss';
 import stylesTable               from 'components/Table/Table.scss';
 import subscribeTo               from 'lib/subscribeTo';
@@ -66,10 +65,11 @@ class Explorer extends DashboardView {
       mutated: false
     };
     this.xhrHandles = [];
+    this.displayRef = React.createRef();
   }
 
   componentDidMount() {
-    let display = ReactDOM.findDOMNode(this.refs.display);
+    let display = this.displayRef.current;
     this.displaySize = {
       width: display.offsetWidth,
       height: display.offsetHeight
@@ -132,7 +132,7 @@ class Explorer extends DashboardView {
       // Update
       activeQueries[existingQueryIndex] = query;
     }
-    
+
     // Update the state to trigger rendering pipeline.
     this.setState({
       activeQueries,
@@ -533,7 +533,7 @@ class Explorer extends DashboardView {
 
     let content = (
       <div className={styles.content}>
-        <div ref='display' className={styles.display}>
+        <div ref={this.displayRef} className={styles.display}>
           {currentDisplay}
         </div>
         {header}
diff --git a/src/dashboard/Analytics/Performance/Performance.react.js b/src/dashboard/Analytics/Performance/Performance.react.js
index bfaecf7d5b..9d4a98533e 100644
--- a/src/dashboard/Analytics/Performance/Performance.react.js
+++ b/src/dashboard/Analytics/Performance/Performance.react.js
@@ -15,7 +15,6 @@ import ExplorerActiveChartButton from 'components/ExplorerActiveChartButton/Expl
 import LoaderContainer           from 'components/LoaderContainer/LoaderContainer.react';
 import Parse                     from 'parse';
 import React                     from 'react';
-import ReactDOM                  from 'react-dom';
 import styles                    from 'dashboard/Analytics/Performance/Performance.scss';
 import Toolbar                   from 'components/Toolbar/Toolbar.react';
 import { verticalCenter }        from 'stylesheets/base.scss';
@@ -91,10 +90,11 @@ export default class Performance extends DashboardView {
       mutated: false
     };
     this.xhrHandles = [];
+    this.displayRef = React.createRef();
   }
 
   componentDidMount() {
-    let display = ReactDOM.findDOMNode(this.refs.display);
+    let display = this.displayRef;
     this.displaySize = {
       width: display.offsetWidth,
       height: display.offsetHeight
@@ -156,7 +156,7 @@ export default class Performance extends DashboardView {
   renderContent() {
     let toolbar = (
       <Toolbar
-        section='Analytics'       
+        section='Analytics'
         subsection='Performance' />
     );
 
@@ -239,7 +239,7 @@ export default class Performance extends DashboardView {
     let content = (
       <LoaderContainer loading={this.state.loading} solid={false}>
         <div className={styles.content}>
-          <div ref='display' className={styles.display}>
+          <div ref={this.displayRef} className={styles.display}>
             {chart}
           </div>
           {header}
diff --git a/src/dashboard/Apps/AppsIndex.react.js b/src/dashboard/Apps/AppsIndex.react.js
index 164151d96a..e183afdaf7 100644
--- a/src/dashboard/Apps/AppsIndex.react.js
+++ b/src/dashboard/Apps/AppsIndex.react.js
@@ -93,6 +93,7 @@ export default class AppsIndex extends React.Component {
     super();
     this.state = { search: '' };
     this.focusField = this.focusField.bind(this);
+    this.searchRef = React.createRef();
   }
 
   componentWillMount() {
@@ -116,8 +117,8 @@ export default class AppsIndex extends React.Component {
   }
 
   focusField() {
-    if (this.refs.search) {
-      this.refs.search.focus();
+    if (this.searchRef.current) {
+      this.searchRef.current.focus();
     }
   }
 
@@ -150,7 +151,7 @@ export default class AppsIndex extends React.Component {
         <div className={styles.header}>
           <Icon width={18} height={18} name='search-outline' fill='#788c97' />
           <input
-            ref='search'
+            ref={this.searchRef}
             className={styles.search}
             onChange={this.updateSearch.bind(this)}
             value={this.state.search}
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index 38669f2471..1722341c97 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -148,6 +148,8 @@ class Browser extends DashboardView {
     this.saveEditCloneRow = this.saveEditCloneRow.bind(this);
     this.abortEditCloneRow = this.abortEditCloneRow.bind(this);
     this.cancelPendingEditRows = this.cancelPendingEditRows.bind(this);
+
+    this.dataBrowserRef = React.createRef();
   }
 
   componentWillMount() {
@@ -1434,8 +1436,8 @@ class Browser extends DashboardView {
   }
 
   handleShowAcl(row, col){
-    this.refs.dataBrowser.setEditing(true);
-    this.refs.dataBrowser.setCurrent({ row, col });
+    this.dataBrowserRef.current.setEditing(true);
+    this.dataBrowserRef.current.setCurrent({ row, col });
   }
 
   // skips key controls handling when dialog is opened
@@ -1509,7 +1511,7 @@ class Browser extends DashboardView {
         }
         browser = (
           <DataBrowser
-            ref='dataBrowser'
+            ref={this.dataBrowserRef}
             isUnique={this.state.isUnique}
             uniqueField={this.state.uniqueField}
             count={count}
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index f96f9be4cb..732ae944e7 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -33,6 +33,7 @@ export default class BrowserTable extends React.Component {
       offset: 0,
     };
     this.handleScroll = this.handleScroll.bind(this);
+    this.tableRef = React.createRef();
   }
 
   componentWillReceiveProps(props) {
@@ -40,22 +41,22 @@ export default class BrowserTable extends React.Component {
       this.setState({
         offset: 0,
       });
-      this.refs.table.scrollTop = 0;
+      this.tableRef.current.scrollTop = 0;
     } else if (this.props.newObject !== props.newObject) {
       this.setState({ offset: 0 });
-      this.refs.table.scrollTop = 0;
+      this.tableRef.current.scrollTop = 0;
     } else if (this.props.ordering !== props.ordering) {
       this.setState({ offset: 0 });
-      this.refs.table.scrollTop = 0;
+      this.tableRef.current.scrollTop = 0;
     }
   }
 
   componentDidMount() {
-    this.refs.table.addEventListener('scroll', this.handleScroll);
+    this.tableRef.current.addEventListener('scroll', this.handleScroll);
   }
 
   componentWillUnmount() {
-    this.refs.table.removeEventListener('scroll', this.handleScroll);
+    this.tableRef.current.removeEventListener('scroll', this.handleScroll);
   }
 
   handleScroll() {
@@ -63,7 +64,7 @@ export default class BrowserTable extends React.Component {
       return;
     }
     requestAnimationFrame(() => {
-      const currentScrollTop = this.refs.table.scrollTop;
+      const currentScrollTop = this.tableRef.current.scrollTop;
       let rowsAbove = Math.floor(currentScrollTop / ROW_HEIGHT);
       let offset = this.state.offset;
       const currentRow = rowsAbove - this.state.offset;
@@ -80,7 +81,7 @@ export default class BrowserTable extends React.Component {
       }
       if (this.state.offset !== offset) {
         this.setState({ offset });
-        this.refs.table.scrollTop = currentScrollTop;
+        this.tableRef.current.scrollTop = currentScrollTop;
       }
       if (this.props.maxFetched - offset <= ROWS_OFFSET * 1.4) {
         this.props.fetchNextPage();
@@ -111,7 +112,7 @@ export default class BrowserTable extends React.Component {
       }
     ));
     let editor = null;
-    let table = <div ref='table' />;
+    let table = <div ref={this.tableRef} />;
     if (this.props.data) {
       const rowWidth = this.props.order.reduce(
         (rowWidth, { visible, width }) => visible ? rowWidth + width : rowWidth,
@@ -391,7 +392,7 @@ export default class BrowserTable extends React.Component {
 
       if (this.props.newObject || this.props.data.length > 0) {
         table = (
-          <div className={styles.table} ref='table'>
+          <div className={styles.table} ref={this.tableRef}>
             <div style={{ height: Math.max(0, this.state.offset * ROW_HEIGHT) }} />
             {editCloneRows}
             {newRow}
@@ -403,7 +404,7 @@ export default class BrowserTable extends React.Component {
         );
       } else {
         table = (
-          <div className={styles.table} ref='table'>
+          <div className={styles.table} ref={this.tableRef}>
             <div className={styles.empty}>
               {this.props.relation ?
                 <EmptyState