diff --git a/index.html b/index.html
index f2b795535..9b39177aa 100644
--- a/index.html
+++ b/index.html
@@ -37,8 +37,8 @@
             <!-- <script src="./node_modules/react-dom/umd/react-dom.development.js"></script> -->
 
 
-        <script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
-        <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
+        <script src="https://unpkg.com/react@16.8.0/umd/react.production.min.js"></script>
+        <script src="https://unpkg.com/react-dom@16.8.0/umd/react-dom.production.min.js"></script>
 
         <!-- Main -->
 
diff --git a/package-lock.json b/package-lock.json
index 0778587a4..8a4ac3ad6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -268,9 +268,9 @@
       }
     },
     "@types/react": {
-      "version": "16.7.8",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.7.8.tgz",
-      "integrity": "sha512-7Vua2IYokMiPBk0WWXaDt4Cg3XVcwU6HpkuPhvwhBrVEy4SafpcvEfGYByoY9jxyFMiegYQPaSOT+H+AY00CPw==",
+      "version": "16.8.1",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.1.tgz",
+      "integrity": "sha512-tD1ETKJcuhANOejRc/p7OgQ16DKnbGi0M3LccelKlPnUCDp2a5koVxZFoRN9HN+A+m84HB5VGN7I+r3nNhS3PA==",
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^2.2.0"
@@ -8944,9 +8944,9 @@
       }
     },
     "react": {
-      "version": "16.6.3",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.6.3.tgz",
-      "integrity": "sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==",
+      "version": "16.8.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.8.0.tgz",
+      "integrity": "sha512-g+nikW2D48kqgWSPwNo0NH9tIGG3DsQFlrtrQ1kj6W77z5ahyIHG0w8kPpz4Sdj6gyLnz0lEd/xsjOoGge2MYQ==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -8955,9 +8955,9 @@
       }
     },
     "react-dom": {
-      "version": "16.6.3",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.6.3.tgz",
-      "integrity": "sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ==",
+      "version": "16.8.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.0.tgz",
+      "integrity": "sha512-dBzoAGYZpW9Yggp+CzBPC7q1HmWSeRc93DWrwbskmG1eHJWznZB/p0l/Sm+69leIGUS91AXPB/qB3WcPnKx8Sw==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
diff --git a/package.json b/package.json
index a34abd3d7..62bd8c5ca 100644
--- a/package.json
+++ b/package.json
@@ -71,8 +71,8 @@
     "mousetrap": "^1.6.2",
     "pako": "^1.0.7",
     "raven-js": "^3.27.0",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "react-icons": "^2.2.7",
     "react-modal": "^3.6.1",
     "request": "^2.88.0",
@@ -86,7 +86,7 @@
     "@types/jest": "^22.1.4",
     "@types/jest-environment-puppeteer": "^2.2.1",
     "@types/puppeteer": "^1.10.1",
-    "@types/react": "^16.7.8",
+    "@types/react": "^16.8.1",
     "@types/react-dom": "^16.0.11",
     "base64-js": "^1.3.0",
     "coveralls": "^3.0.2",
diff --git a/src/components/Split.tsx b/src/components/Split.tsx
index 9615a15eb..42ff43e06 100644
--- a/src/components/Split.tsx
+++ b/src/components/Split.tsx
@@ -110,7 +110,7 @@ export class Split extends React.Component<SplitProps, {
     return this.props.onChange && this.props.onChange(this.state.splits);
   }
 
-  onResizerMouseMove = (e: MouseEvent<any>) => {
+  onResizerMouseMove = (e: any) => {
     if (this.index < 0) {
       return;
     }
diff --git a/src/components/StatusBar.tsx b/src/components/StatusBar.tsx
index d05fd37d7..4279d3c86 100644
--- a/src/components/StatusBar.tsx
+++ b/src/components/StatusBar.tsx
@@ -22,38 +22,32 @@
 import * as React from "react";
 import appStore from "../stores/AppStore";
 
-export class StatusBar extends React.Component<{}, {
-  hasStatus: boolean;
-  status: string;
-}> {
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      hasStatus: false,
-      status: ""
-    };
-  }
-  onDidChangeStatus = () => {
-    this.setState({
+export function StatusBar() {
+  const [state, setState] = React.useState({
+    hasStatus: false,
+    status: ""
+  });
+
+  function onDidChangeStatus() {
+    setState({
       hasStatus: appStore.hasStatus(),
       status: appStore.getStatus()
     });
   }
-  componentDidMount() {
-    appStore.onDidChangeStatus.register(this.onDidChangeStatus);
-  }
-  componentWillUnmount() {
-    appStore.onDidChangeStatus.unregister(this.onDidChangeStatus);
-  }
-  render() {
-    let className = "status-bar";
-    if (this.state.hasStatus) {
-      className += " active";
-    }
-    return <div className={className}>
-      <div className="status-bar-item">
-        {this.state.status}
-      </div>
-    </div>;
+
+  React.useEffect(() => {
+    appStore.onDidChangeStatus.register(onDidChangeStatus);
+    return () => appStore.onDidChangeStatus.unregister(onDidChangeStatus);
+  });
+
+  let className = "status-bar";
+  if (state.hasStatus) {
+    className += " active";
   }
+
+  return <div className={className}>
+    <div className="status-bar-item">
+      {state.status}
+    </div>
+  </div>;
 }
diff --git a/src/components/Widgets.tsx b/src/components/Widgets.tsx
index 728bf6efa..108af0eeb 100644
--- a/src/components/Widgets.tsx
+++ b/src/components/Widgets.tsx
@@ -22,50 +22,35 @@
 import * as React from "react";
 import { ChangeEventHandler } from "react";
 
-export class Spacer extends React.Component<{
-  height: number
-}, {}> {
-  render() {
-    return <div style={{ height: this.props.height }} />;
-  }
+export function Spacer({ height }: { height: number }) {
+  return <div style={{ height }} />;
 }
 
-export class Divider extends React.Component<{
-  height: number
-}, {}> {
-  render() {
-    return <div
-      className="divider"
-      style={{
-        marginTop: this.props.height / 2,
-        marginBottom: this.props.height / 2
-      }}
-    />;
-  }
+export function Divider({ height }: { height: number }) {
+  return <div
+    className="divider"
+    style={{
+      marginTop: height / 2,
+      marginBottom: height / 2
+    }}
+  />;
 }
 
-export class TextInputBox extends React.Component<{
+export function TextInputBox({ label, value, error, onChange }: {
   label: string;
   value: string;
   error?: string;
   onChange?: ChangeEventHandler<any>;
-}, {
-
-  }> {
-  constructor(props: any) {
-    super(props);
-  }
-  render() {
-    const input = <input className="text-input-box" type="text" value={this.props.value} onChange={this.props.onChange} />;
-    if (this.props.label) {
-      return <div style={{ display: "flex", flexDirection: "row" }}>
-        <div className="text-input-box-label">{this.props.label}</div>
-        <div style={{ flex: 1 }}>{input}</div>
-        {this.props.error && <div className="text-input-box-error">{this.props.error}</div>}
-      </div>;
-    } else {
-      return input;
-    }
+}) {
+  const input = <input className="text-input-box" type="text" value={value} onChange={onChange} />;
+  if (label) {
+    return <div style={{ display: "flex", flexDirection: "row" }}>
+      <div className="text-input-box-label">{label}</div>
+      <div style={{ flex: 1 }}>{input}</div>
+      {error && <div className="text-input-box-error">{error}</div>}
+    </div>;
+  } else {
+    return input;
   }
 }
 
@@ -94,70 +79,54 @@ export class UploadInput extends React.Component<{
     this.inputElement.click();
   }
   render() {
-    return <input id="file-upload-input" ref={ref => this.setInputElement(ref)} type="file" onChange={this.props.onChange} multiple hidden/>;
+    return <input id="file-upload-input" ref={ref => this.setInputElement(ref)} type="file" onChange={this.props.onChange} multiple hidden />;
   }
 }
 
-export class ListItem extends React.Component<{
+export function ListItem({ label, onClick, icon, selected, value, error }: {
   label: string;
   onClick?: Function;
   icon?: string;
   selected?: boolean;
   value: any;
   error?: string;
-}, {
-
-  }> {
-
-  render() {
-    let className = "list-item";
-    if (this.props.selected) {
-      className += " selected";
-    }
-    let content = <div className="label">{this.props.label}</div>;
-    if (this.props.error) {
-        content = <div className="list-item-flex">
-          <div className="label">{this.props.label}</div>
-          <div className="error">{this.props.error}</div>
-        </div>;
-    }
-    return <div className={className} onClick={this.props.onClick as any}>
-      <div className={"monaco-icon-label file-icon " + this.props.icon} />
-      {content}
+}) {
+  let className = "list-item";
+  if (selected) {
+    className += " selected";
+  }
+  let content = <div className="label">{label}</div>;
+  if (error) {
+    content = <div className="list-item-flex">
+      <div className="label">{label}</div>
+      <div className="error">{error}</div>
     </div>;
   }
+  return <div className={className} onClick={onClick as any}>
+    <div className={"monaco-icon-label file-icon " + icon} />
+    {content}
+  </div>;
 }
 
-export class ListBox extends React.Component<{
+export function ListBox({ height, value, onSelect, children }: {
   height: number;
   value?: any;
   onSelect?: (value: any) => void;
-}, {
-
-  }> {
-  constructor(props: any) {
-    super(props);
-  }
-
-  render() {
-    const { children, onSelect } = this.props;
-
-    const newChildren = React.Children.map(children, (child: any, index) => {
-      return React.cloneElement(child as any, {
-        onClick: () => {
-          return onSelect && onSelect(child.props.value);
-        },
-        selected: this.props.value === child.props.value
-      });
+  children: any;
+}) {
+  const newChildren = React.Children.map(children, (child: any, index) => {
+    return React.cloneElement(child as any, {
+      onClick: () => {
+        return onSelect && onSelect(child.props.value);
+      },
+      selected: value === child.props.value
     });
+  });
 
-    return <div
-      className="list-box"
-      style={{
-        height: this.props.height
-      }}
-    >
-      {newChildren}
-    </div>;
-  }
+  return <div
+    className="list-box"
+    style={{ height }}
+  >
+    {newChildren}
+  </div>;
 }
diff --git a/src/components/editor/Tabs.tsx b/src/components/editor/Tabs.tsx
index fbea548dc..e79503833 100644
--- a/src/components/editor/Tabs.tsx
+++ b/src/components/editor/Tabs.tsx
@@ -65,7 +65,7 @@ export class Tabs extends Component<TabsProps, TabsState> {
     e.preventDefault();
   }
 
-  onDoubleClick   = (e: MouseEvent<any>)  => { this.props.onDoubleClick(); };
+  onDoubleClick   = (e: any)              => { this.props.onDoubleClick(); };
   setContainerRef = (ref: HTMLDivElement) => { this.container = ref; };
 
   render() {
@@ -110,20 +110,20 @@ export class Tab extends PureComponent<TabProps, {}> {
     onClose: () => {},
   };
 
-  onMouseHandle = (e: MouseEvent<HTMLElement>, handler: Function) => {
+  onMouseHandle = (e: any, handler: Function) => {
     e.stopPropagation();
     handler(this.props.value);
   }
 
-  onClick = (e: MouseEvent<HTMLElement>) => {
+  onClick = (e: any) => {
     this.onMouseHandle(e, this.props.onClick);
   }
 
-  onDoubleClick = (e: MouseEvent<HTMLElement>) => {
+  onDoubleClick = (e: any) => {
     this.onMouseHandle(e, this.props.onDoubleClick);
   }
 
-  onClose = (e: MouseEvent<HTMLElement>) => {
+  onClose = (e: any) => {
     this.onMouseHandle(e, this.props.onClose);
   }
 
diff --git a/src/components/shared/Button.tsx b/src/components/shared/Button.tsx
index 8e5673484..ae762224d 100644
--- a/src/components/shared/Button.tsx
+++ b/src/components/shared/Button.tsx
@@ -21,8 +21,10 @@
 
 import * as React from "react";
 
-export class Button extends React.Component<{
-  icon?: JSX.Element;
+export function Button({
+  icon, label, title, isDisabled, onClick, customClassName, href, target, rel
+}: {
+  icon: JSX.Element;
   label?: string;
   title?: string;
   isDisabled?: boolean;
@@ -31,38 +33,36 @@ export class Button extends React.Component<{
   href?: string,
   target?: string,
   rel?: string
-}, {}> {
-  render() {
-    let className = "button ";
-    if (this.props.customClassName) {
-      className += this.props.customClassName;
-    }
-    if (this.props.isDisabled) {
-      className += " disabled";
-    }
-    if (this.props.href && !this.props.isDisabled) {
-      return (
-        <a
-          href={this.props.href}
-          target={this.props.target || ""}
-          rel={this.props.rel || ""}
-          className={className}
-          title={this.props.title}
-        >
-          {this.props.icon} {this.props.label}
-        </a>
-      );
-    }
-    return <div
-      className={className}
-      onClick={() => {
-        if (this.props.onClick && !this.props.isDisabled) {
-          this.props.onClick();
-        }
-      }}
-      title={this.props.title}
-    >
-      {this.props.icon} {this.props.label}
-    </div>;
+}) {
+  let className = "button ";
+  if (customClassName) {
+    className += customClassName;
   }
+  if (isDisabled) {
+    className += " disabled";
+  }
+  if (href && !isDisabled) {
+    return (
+      <a
+        href={href}
+        target={target || ""}
+        rel={rel || ""}
+        className={className}
+        title={title}
+      >
+        {icon} {label}
+      </a>
+    );
+  }
+  return <div
+    className={className}
+    onClick={() => {
+      if (onClick && !isDisabled) {
+        onClick();
+      }
+    }}
+    title={title}
+  >
+    {icon} {label}
+  </div>;
 }