From e5d338ea647ec195b135ae0abb69373fee6945db Mon Sep 17 00:00:00 2001
From: Ives van Hoorne <ives.v.h@gmail.com>
Date: Tue, 8 Sep 2020 22:37:35 +0200
Subject: [PATCH 1/8] Debounce updating the status indicator of devtools

---
 .../Preview/DevTools/Tests/index.tsx          |  55 +++++----
 .../app/components/Preview/DevTools/index.tsx | 109 +++++++++++++-----
 2 files changed, 107 insertions(+), 57 deletions(-)

diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/index.tsx
index 77323bafdf5..03d7d3af522 100644
--- a/packages/app/src/app/components/Preview/DevTools/Tests/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/Tests/index.tsx
@@ -186,7 +186,12 @@ class Tests extends React.Component<DevToolProps, State> {
    * Every setState call will have to go through this, otherwise we get race conditions
    * where the underlying state has changed, but the draftState didn't change.
    */
-  setStateDebounced = (setStateFunc, time = 200) => {
+  setStateDebounced = (
+    setStateFunc:
+      | Partial<State>
+      | ((state: State, props: DevToolProps) => Partial<State>),
+    time = 200
+  ) => {
     const draftState = this.draftState || this.state;
 
     const newState =
@@ -234,7 +239,7 @@ class Tests extends React.Component<DevToolProps, State> {
 
   selectFile = (file: File) => {
     this.setStateDebounced(
-      state => ({
+      (state) => ({
         selectedFilePath:
           file.fileName === state.selectedFilePath ? null : file.fileName,
       }),
@@ -244,8 +249,8 @@ class Tests extends React.Component<DevToolProps, State> {
 
   toggleFileExpansion = (file: File) => {
     this.setStateDebounced(
-      oldState =>
-        immer(oldState, state => {
+      (oldState) =>
+        immer(oldState, (state) => {
           state.fileExpansionState[file.fileName] = !state.fileExpansionState[
             file.fileName
           ];
@@ -312,10 +317,10 @@ class Tests extends React.Component<DevToolProps, State> {
 
           const files = Object.keys(this.state.files);
           const failingTests = files.filter(
-            f => this.getStatus(this.state.files[f]) === 'fail'
+            (f) => this.getStatus(this.state.files[f]) === 'fail'
           ).length;
           const passingTests = files.filter(
-            f => this.getStatus(this.state.files[f]) === 'pass'
+            (f) => this.getStatus(this.state.files[f]) === 'pass'
           ).length;
 
           if (this.props.updateStatus) {
@@ -333,8 +338,8 @@ class Tests extends React.Component<DevToolProps, State> {
         }
 
         case messages.ADD_FILE: {
-          this.setStateDebounced(oldState =>
-            immer(oldState, state => {
+          this.setStateDebounced((oldState) =>
+            immer(oldState, (state) => {
               state.files[data.path] = {
                 tests: {},
                 fileName: data.path,
@@ -346,8 +351,8 @@ class Tests extends React.Component<DevToolProps, State> {
           break;
         }
         case 'remove_file': {
-          this.setStateDebounced(oldState =>
-            immer(oldState, state => {
+          this.setStateDebounced((oldState) =>
+            immer(oldState, (state) => {
               if (state.files[data.path]) {
                 delete state.files[data.path];
               }
@@ -358,8 +363,8 @@ class Tests extends React.Component<DevToolProps, State> {
           break;
         }
         case messages.FILE_ERROR: {
-          this.setStateDebounced(oldState =>
-            immer(oldState, state => {
+          this.setStateDebounced((oldState) =>
+            immer(oldState, (state) => {
               if (state.files[data.path]) {
                 state.files[data.path].fileError = data.error;
               }
@@ -378,8 +383,8 @@ class Tests extends React.Component<DevToolProps, State> {
         case messages.ADD_TEST: {
           const testName = [...this.currentDescribeBlocks, data.testName];
 
-          this.setStateDebounced(oldState =>
-            immer(oldState, state => {
+          this.setStateDebounced((oldState) =>
+            immer(oldState, (state) => {
               if (!state.files[data.path]) {
                 state.files[data.path] = {
                   tests: {},
@@ -404,8 +409,8 @@ class Tests extends React.Component<DevToolProps, State> {
           const { test } = data;
           const testName = [...test.blocks, test.name];
 
-          this.setStateDebounced(oldState =>
-            immer(oldState, state => {
+          this.setStateDebounced((oldState) =>
+            immer(oldState, (state) => {
               if (!state.files[test.path]) {
                 state.files[test.path] = {
                   tests: {},
@@ -435,8 +440,8 @@ class Tests extends React.Component<DevToolProps, State> {
           const { test } = data;
           const testName = [...test.blocks, test.name];
 
-          this.setStateDebounced(oldState =>
-            immer(oldState, state => {
+          this.setStateDebounced((oldState) =>
+            immer(oldState, (state) => {
               if (!state.files[test.path]) {
                 return;
               }
@@ -524,7 +529,7 @@ class Tests extends React.Component<DevToolProps, State> {
   };
 
   toggleWatching = () => {
-    this.setStateDebounced(state => ({ watching: !state.watching }), 0);
+    this.setStateDebounced((state) => ({ watching: !state.watching }), 0);
     dispatch({
       type: 'set-test-watching',
       watching: !this.state.watching,
@@ -540,8 +545,8 @@ class Tests extends React.Component<DevToolProps, State> {
 
   runTests = (file: File) => {
     this.setStateDebounced(
-      oldState =>
-        immer(oldState, state => {
+      (oldState) =>
+        immer(oldState, (state) => {
           if (state.files[file.fileName]) {
             state.files[file.fileName].tests = {};
           }
@@ -567,15 +572,15 @@ class Tests extends React.Component<DevToolProps, State> {
     const selectedFile = this.state.files[selectedFilePath || ''];
 
     const fileStatuses = {};
-    Object.keys(this.state.files).forEach(path => {
+    Object.keys(this.state.files).forEach((path) => {
       fileStatuses[path] = this.getStatus(this.state.files[path]);
     });
 
     const tests = [];
-    Object.keys(this.state.files).forEach(path => {
+    Object.keys(this.state.files).forEach((path) => {
       const file = this.state.files[path];
       if (file && file.tests) {
-        Object.keys(file.tests).forEach(t => {
+        Object.keys(file.tests).forEach((t) => {
           tests.push(file.tests[t]);
         });
       }
@@ -600,7 +605,7 @@ class Tests extends React.Component<DevToolProps, State> {
             <div style={{ marginTop: '1rem' }}>
               {Object.keys(this.state.files)
                 .sort()
-                .map(fileName => (
+                .map((fileName) => (
                   <TestElement
                     selectFile={this.selectFile}
                     selectedFile={selectedFile}
diff --git a/packages/app/src/app/components/Preview/DevTools/index.tsx b/packages/app/src/app/components/Preview/DevTools/index.tsx
index dc878e3526c..60577e54ccc 100644
--- a/packages/app/src/app/components/Preview/DevTools/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/index.tsx
@@ -116,6 +116,7 @@ type State = {
 };
 
 export class DevTools extends React.PureComponent<Props, State> {
+  draftState: State | null = null;
   constructor(props: Props) {
     super(props);
 
@@ -139,6 +140,49 @@ export class DevTools extends React.PureComponent<Props, State> {
     };
   }
 
+  setStateTimer = null;
+  /**
+   * We can call setState 100s of times per second, which puts great strain
+   * on rendering from React. We debounce the rendering so that we flush changes
+   * after a while. This prevents the editor from getting stuck.
+   *
+   * Every setState call will have to go through this, otherwise we get race conditions
+   * where the underlying state has changed, but the draftState didn't change.
+   */
+  setStateDebounced = (
+    setStateFunc:
+      | Partial<State>
+      | ((state: State, props: Props) => Partial<State>),
+    time = 200
+  ) => {
+    const draftState = this.draftState || this.state;
+
+    const newState =
+      typeof setStateFunc === 'function'
+        ? setStateFunc(draftState, this.props)
+        : setStateFunc;
+    this.draftState = { ...draftState, ...newState };
+
+    if (this.setStateTimer) {
+      clearTimeout(this.setStateTimer);
+    }
+
+    const updateFunc = () => {
+      if (this.draftState) {
+        this.setState(this.draftState);
+      }
+
+      this.draftState = null;
+      this.setStateTimer = null;
+    };
+
+    if (time === 0) {
+      updateFunc();
+    } else {
+      this.setStateTimer = window.setTimeout(updateFunc, time);
+    }
+  };
+
   normalizeHeight = (el: HTMLDivElement) => {
     if (typeof this.state.height === 'string') {
       const { height } = el.getBoundingClientRect();
@@ -204,7 +248,7 @@ export class DevTools extends React.PureComponent<Props, State> {
 
   setHidden = (hidden: boolean) => {
     if (!hidden) {
-      return this.setState(state => ({
+      return this.setState((state) => ({
         status: {
           ...state.status,
           [this.getCurrentPane().id]: null,
@@ -228,39 +272,40 @@ export class DevTools extends React.PureComponent<Props, State> {
     status: 'success' | 'warning' | 'error' | 'info' | 'clear',
     count?: number
   ) => {
-    const currentStatus = (status !== 'clear' && this.state.status[id]) || {
-      unread: 0,
-      type: 'info',
-    };
-    let newStatus = currentStatus.type;
+    this.setStateDebounced((state) => {
+      const currentStatus = (status !== 'clear' && state.status[id]) || {
+        unread: 0,
+        type: 'info',
+      };
+      let newStatus = currentStatus.type;
 
-    if (
-      status === 'success' &&
-      newStatus !== 'error' &&
-      newStatus !== 'warning'
-    ) {
-      newStatus = 'success';
-    } else if (status === 'warning' && newStatus !== 'error') {
-      newStatus = 'warning';
-    } else if (status === 'error') {
-      newStatus = 'error';
-    }
+      if (
+        status === 'success' &&
+        newStatus !== 'error' &&
+        newStatus !== 'warning'
+      ) {
+        newStatus = 'success';
+      } else if (status === 'warning' && newStatus !== 'error') {
+        newStatus = 'warning';
+      } else if (status === 'error') {
+        newStatus = 'error';
+      }
 
-    let unread = currentStatus.unread + (status !== 'clear' ? 1 : 0);
+      let unread = currentStatus.unread + (status !== 'clear' ? 1 : 0);
 
-    if (count != null) {
-      unread = count;
-    }
-
-    this.setState(state => ({
-      status: {
-        ...state.status,
-        [id]: {
-          type: newStatus,
-          unread,
+      if (count != null) {
+        unread = count;
+      }
+      return {
+        status: {
+          ...state.status,
+          [id]: {
+            type: newStatus,
+            unread,
+          },
         },
-      },
-    }));
+      };
+    }, 50);
   };
 
   handleTouchStart = (event: React.TouchEvent) => {
@@ -276,7 +321,7 @@ export class DevTools extends React.PureComponent<Props, State> {
       const { clientY } = event;
       unFocus(document, window);
       // @ts-ignore
-      this.setState(state => ({
+      this.setState((state) => ({
         startY: clientY,
         startHeight: state.height,
         mouseDown: true,
@@ -446,7 +491,7 @@ export class DevTools extends React.PureComponent<Props, State> {
 
     return (
       <Container
-        ref={el => {
+        ref={(el) => {
           this.node = el || this.node;
 
           if (this.node) {

From f8389f414b5b94c29d932aad8dd3cfffe4e98a0b Mon Sep 17 00:00:00 2001
From: Ives van Hoorne <ives.v.h@gmail.com>
Date: Tue, 8 Sep 2020 22:46:25 +0200
Subject: [PATCH 2/8] Fix clearing the console for the first time

---
 .../Preview/DevTools/Console/index.tsx        | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/packages/app/src/app/components/Preview/DevTools/Console/index.tsx b/packages/app/src/app/components/Preview/DevTools/Console/index.tsx
index 3c39d7b2a7a..492bd1dfabd 100644
--- a/packages/app/src/app/components/Preview/DevTools/Console/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/Console/index.tsx
@@ -27,10 +27,9 @@ const StyledClearIcon = styled(ClearIcon)`
   font-size: 0.8em;
 `;
 
-class ConsoleComponent extends React.Component<StyledProps> {
+class ConsoleComponent extends React.PureComponent<StyledProps> {
   state = {
     messages: [],
-    initialClear: true,
     filter: [],
     searchKeywords: '',
   };
@@ -53,7 +52,7 @@ class ConsoleComponent extends React.Component<StyledProps> {
     }
   }
 
-  handleMessage = data => {
+  handleMessage = (data) => {
     switch (data.type) {
       case 'console': {
         const message = Decode(data.log);
@@ -75,13 +74,8 @@ class ConsoleComponent extends React.Component<StyledProps> {
         break;
       }
       case 'clear-console': {
-        if (this.state.initialClear) {
-          this.setState({
-            initialClear: false,
-          });
-        } else {
-          this.clearConsole();
-        }
+        this.clearConsole();
+
         break;
       }
       case 'eval-result': {
@@ -104,7 +98,7 @@ class ConsoleComponent extends React.Component<StyledProps> {
           if (aggregatedResults) {
             const { summaryMessage, failedMessages } = aggregatedResults;
             this.addMessage('log', [summaryMessage]);
-            failedMessages.forEach(t => {
+            failedMessages.forEach((t) => {
               this.addMessage('warn', [t]);
             });
           } else {
@@ -146,7 +140,7 @@ class ConsoleComponent extends React.Component<StyledProps> {
       this.props.updateStatus(this.getType(method));
     }
 
-    this.setState(state =>
+    this.setState((state) =>
       update(state, {
         messages: {
           $push: [
@@ -232,7 +226,7 @@ class ConsoleComponent extends React.Component<StyledProps> {
     return (
       <Container>
         <Messages
-          ref={el => {
+          ref={(el) => {
             this.list = el;
           }}
         >
@@ -260,7 +254,7 @@ const ConsoleFilterInput = ({ style }) => (
   />
 );
 
-const ConsoleFilterSelect = props => {
+const ConsoleFilterSelect = (props) => {
   const handleOnChange = ({ target: { value } }) => {
     if (value === 'all') {
       dispatch({ type: 'filter-log', filters: [] });

From 3fcef06e436c6c0254d9112a48b7488ecc715775 Mon Sep 17 00:00:00 2001
From: Ives van Hoorne <ives.v.h@gmail.com>
Date: Wed, 9 Sep 2020 21:00:48 +0200
Subject: [PATCH 3/8] Limit amount of messages we show in the console

---
 packages/app/package.json                     |  1 -
 .../Preview/DevTools/Console/index.tsx        | 37 +++++++++++--------
 .../app/src/app/overmind/internalActions.ts   |  6 +--
 yarn.lock                                     |  2 +-
 4 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/packages/app/package.json b/packages/app/package.json
index ccc1b69f84c..0645ef9dd88 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -142,7 +142,6 @@
     "humps": "CompuIves/humps",
     "ignore": "^5.1.4",
     "immer": "^3.2.0",
-    "immutability-helper": "^2.6.6",
     "instantsearch.css": "^7.1.0",
     "is-url": "^1.2.2",
     "jest-circus": "^22.1.4",
diff --git a/packages/app/src/app/components/Preview/DevTools/Console/index.tsx b/packages/app/src/app/components/Preview/DevTools/Console/index.tsx
index 492bd1dfabd..45292c77b29 100644
--- a/packages/app/src/app/components/Preview/DevTools/Console/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/Console/index.tsx
@@ -2,7 +2,7 @@ import Select from '@codesandbox/common/lib/components/Select';
 import theme from '@codesandbox/common/lib/theme';
 import { listen, dispatch } from 'codesandbox-api';
 import { Decode, Console as ConsoleFeed } from 'console-feed';
-import update from 'immutability-helper';
+import immer from 'immer';
 import { debounce } from 'lodash-es';
 import React from 'react';
 import ClearIcon from 'react-icons/lib/md/block';
@@ -27,7 +27,18 @@ const StyledClearIcon = styled(ClearIcon)`
   font-size: 0.8em;
 `;
 
-class ConsoleComponent extends React.PureComponent<StyledProps> {
+type State = {
+  messages: any[];
+  filter: Array<'info' | 'log' | 'warn'>;
+  searchKeywords: string;
+};
+
+/**
+ * Max amount of messages that we show in the console
+ */
+const MAX_MESSAGE_COUNT = 500;
+
+class ConsoleComponent extends React.PureComponent<StyledProps, State> {
   state = {
     messages: [],
     filter: [],
@@ -36,7 +47,7 @@ class ConsoleComponent extends React.PureComponent<StyledProps> {
 
   listener;
 
-  constructor(props) {
+  constructor(props: StyledProps) {
     super(props);
 
     this.scrollToBottom = debounce(this.scrollToBottom, 1 / 60);
@@ -141,22 +152,18 @@ class ConsoleComponent extends React.PureComponent<StyledProps> {
     }
 
     this.setState((state) =>
-      update(state, {
-        messages: {
-          $push: [
-            {
-              method,
-              data,
-            },
-          ],
-        },
+      immer(state, (draft) => {
+        draft.messages.push({ method, data });
+        draft.messages = draft.messages.slice(
+          Math.max(0, draft.messages.length - MAX_MESSAGE_COUNT)
+        );
       })
     );
   }
 
-  list;
+  list: HTMLDivElement | undefined;
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: StyledProps) {
     if (nextProps.sandboxId !== this.props.sandboxId) {
       this.clearConsole(true);
     }
@@ -267,7 +274,7 @@ const ConsoleFilterSelect = (props) => {
   return (
     <Select
       style={{
-        fontFamily: 'Roboto',
+        fontFamily: 'Inter',
         fontWeight: 600,
         fontSize: '0.875rem',
         height: 22,
diff --git a/packages/app/src/app/overmind/internalActions.ts b/packages/app/src/app/overmind/internalActions.ts
index 27b29676c26..b7b6514c7c1 100755
--- a/packages/app/src/app/overmind/internalActions.ts
+++ b/packages/app/src/app/overmind/internalActions.ts
@@ -35,8 +35,8 @@ export const initializeNewUser: AsyncAction = async ({
   effects.analytics.setUserId(state.user!.id, state.user!.email);
 
   try {
-    actions.internal.trackCurrentTeams().catch(e => {});
-    actions.internal.identifyCurrentUser().catch(e => {});
+    actions.internal.trackCurrentTeams().catch((e) => {});
+    actions.internal.identifyCurrentUser().catch((e) => {});
   } catch (e) {
     // Not majorly important
   }
@@ -252,7 +252,7 @@ export const setCurrentSandbox: AsyncAction<Sandbox> = async (
   // This can happen when a sandbox is opened that's different from the current
   // sandbox, with completely different files
   if (
-    !sandbox.modules.find(module => module.shortid === currentModuleShortid)
+    !sandbox.modules.find((module) => module.shortid === currentModuleShortid)
   ) {
     const defaultModule = defaultOpenedModule(sandbox, parsedConfigs);
 
diff --git a/yarn.lock b/yarn.lock
index 767fee25047..db310612405 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16057,7 +16057,7 @@ immer@^3.2.0:
   resolved "https://registry.yarnpkg.com/immer/-/immer-3.2.0.tgz#53686471e9dd2b070e0fb5500c6fdecd3a99375f"
   integrity sha512-+a2R8z9eELHst6aht++nzVzJ8LJ+Hsg49qttfg9Kc/vmoxEdPXw5/rV6+4DYWGgnq+B36KbLr4OTaGtS9mDjtg==
 
-immutability-helper@^2.6.6, immutability-helper@^2.7.1:
+immutability-helper@^2.7.1:
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.9.1.tgz#71c423ba387e67b6c6ceba0650572f2a2a6727df"
   integrity sha512-r/RmRG8xO06s/k+PIaif2r5rGc3j4Yhc01jSBfwPCXDLYZwp/yxralI37Df1mwmuzcCsen/E/ITKcTEvc1PQmQ==

From 2430b3cd84f90e5eade0a638ce8b450b89937fc4 Mon Sep 17 00:00:00 2001
From: Ives van Hoorne <ives.v.h@gmail.com>
Date: Wed, 9 Sep 2020 21:16:22 +0200
Subject: [PATCH 4/8] Don't clear the console on HMR updates

---
 packages/app/src/sandbox/compile.ts           | 37 ++++++++++++-------
 .../common/src/components/Preview/index.tsx   | 15 ++------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/app/src/sandbox/compile.ts b/packages/app/src/sandbox/compile.ts
index c331a98753a..2b8adbd059c 100644
--- a/packages/app/src/sandbox/compile.ts
+++ b/packages/app/src/sandbox/compile.ts
@@ -218,7 +218,7 @@ function getDependencies(
   // Add all babel plugins/presets to whitelisted dependencies
   if (configurations && configurations.babel && configurations.babel.parsed) {
     flatten(configurations.babel.parsed.presets || [])
-      .filter(p => typeof p === 'string')
+      .filter((p) => typeof p === 'string')
       .forEach((p: string) => {
         const [first, ...parts] = p.split('/');
         const prefixedName = p.startsWith('@')
@@ -230,7 +230,7 @@ function getDependencies(
       });
 
     flatten(configurations.babel.parsed.plugins || [])
-      .filter(p => typeof p === 'string')
+      .filter((p) => typeof p === 'string')
       .forEach((p: string) => {
         const [first, ...parts] = p.split('/');
         const prefixedName = p.startsWith('@')
@@ -242,7 +242,7 @@ function getDependencies(
       });
   }
 
-  Object.keys(d).forEach(dep => {
+  Object.keys(d).forEach((dep) => {
     const usedDep = DEPENDENCY_ALIASES[dep] || dep;
 
     if (dep === 'reason-react') {
@@ -252,7 +252,7 @@ function getDependencies(
     returnedDependencies[usedDep] = d[dep];
   });
 
-  Object.keys(devDependencies).forEach(dep => {
+  Object.keys(devDependencies).forEach((dep) => {
     const usedDep = DEPENDENCY_ALIASES[dep] || dep;
 
     if (foundWhitelistedDevDependencies.indexOf(usedDep) > -1) {
@@ -303,7 +303,7 @@ function getDependencies(
   returnedDependencies.csbbust = '1.0.0';
   returnedDependencies['node-libs-browser'] = '2.2.0';
 
-  preinstalledDependencies.forEach(dep => {
+  preinstalledDependencies.forEach((dep) => {
     if (returnedDependencies[dep]) {
       delete returnedDependencies[dep];
     }
@@ -335,7 +335,7 @@ async function updateManager(
 ): Promise<TranspiledModule[]> {
   manager.updateConfigurations(configurations);
   await manager.preset.setup(manager);
-  return manager.updateData(managerModules).then(x => {
+  return manager.updateData(managerModules).then((x) => {
     changedModuleCount = x.length;
     return x;
   });
@@ -404,6 +404,7 @@ interface CompileOptions {
   skipEval?: boolean;
   hasFileResolver?: boolean;
   disableDependencyPreprocessing?: boolean;
+  clearConsoleDisabled?: boolean;
 }
 
 async function compile({
@@ -418,10 +419,18 @@ async function compile({
   skipEval = false,
   hasFileResolver = false,
   disableDependencyPreprocessing = false,
+  clearConsoleDisabled = false,
 }: CompileOptions) {
-  dispatch({
-    type: 'start',
-  });
+  if (firstLoad) {
+    // Clear the console on first load, but don't clear the console on HMR updates
+    if (!clearConsoleDisabled) {
+      // @ts-ignore Chrome behaviour
+      console.clear('__internal__'); // eslint-disable-line no-console
+      dispatch({ type: 'clear-console' });
+    }
+  }
+
+  dispatch({ type: 'start' });
   metrics.measure('compilation');
 
   const startTime = Date.now();
@@ -444,12 +453,12 @@ async function compile({
     const configurations = parseConfigurations(
       template,
       templateDefinition.configurationFiles,
-      path => modules[path]
+      (path) => modules[path]
     );
 
     const errors = Object.keys(configurations)
-      .map(c => configurations[c])
-      .filter(x => x.error);
+      .map((c) => configurations[c])
+      .filter((x) => x.error);
 
     if (errors.length) {
       const e = new Error(
@@ -530,7 +539,7 @@ async function compile({
 
     const foundMain = isModuleView
       ? entry
-      : possibleEntries.find(p => Boolean(modules[p]));
+      : possibleEntries.find((p) => Boolean(modules[p]));
 
     if (!foundMain) {
       throw new Error(
@@ -584,7 +593,7 @@ async function compile({
 
       if (!manager.webpackHMR) {
         const htmlEntries = templateDefinition.getHTMLEntries(configurations);
-        const htmlModulePath = htmlEntries.find(p => Boolean(modules[p]));
+        const htmlModulePath = htmlEntries.find((p) => Boolean(modules[p]));
         const htmlModule = modules[htmlModulePath];
 
         const { head, body } = getHTMLParts(
diff --git a/packages/common/src/components/Preview/index.tsx b/packages/common/src/components/Preview/index.tsx
index 48636ccf0a1..0d46550c066 100644
--- a/packages/common/src/components/Preview/index.tsx
+++ b/packages/common/src/components/Preview/index.tsx
@@ -380,7 +380,7 @@ class BasePreview extends React.Component<Props, State> {
     const modulesObject: IModulesByPath = {};
     const { sandbox } = this.props;
 
-    sandbox.modules.forEach(m => {
+    sandbox.modules.forEach((m) => {
       const path = getModulePath(sandbox.modules, sandbox.directories, m.id);
       if (path) {
         modulesObject[path] = {
@@ -417,16 +417,6 @@ class BasePreview extends React.Component<Props, State> {
     const { settings } = this.props;
     const { sandbox } = this.props;
 
-    if (
-      process.env.NODE_ENV !== 'development' &&
-      settings.clearConsoleEnabled &&
-      !this.serverPreview
-    ) {
-      // @ts-ignore Chrome behaviour
-      console.clear('__internal__'); // eslint-disable-line no-console
-      dispatch({ type: 'clear-console' });
-    }
-
     // Do it here so we can see the dependency fetching screen if needed
     this.clearErrors();
     if (settings.forceRefresh && !initialRender) {
@@ -453,6 +443,7 @@ class BasePreview extends React.Component<Props, State> {
           hasActions: Boolean(this.props.onAction),
           previewSecret: sandbox.previewSecret,
           showScreen,
+          clearConsoleDisabled: !settings.clearConsoleEnabled,
         });
       }
     }
@@ -512,7 +503,7 @@ class BasePreview extends React.Component<Props, State> {
     });
   };
 
-  refreshHashedUrl = url => {
+  refreshHashedUrl = (url) => {
     if (!url.includes('#')) {
       return;
     }

From b044b089560fce3354180115839180b77a858c26 Mon Sep 17 00:00:00 2001
From: Ives van Hoorne <ives.v.h@gmail.com>
Date: Wed, 9 Sep 2020 21:19:57 +0200
Subject: [PATCH 5/8] Don't change unnecessary file

---
 packages/app/src/app/overmind/internalActions.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/app/overmind/internalActions.ts b/packages/app/src/app/overmind/internalActions.ts
index b7b6514c7c1..27b29676c26 100755
--- a/packages/app/src/app/overmind/internalActions.ts
+++ b/packages/app/src/app/overmind/internalActions.ts
@@ -35,8 +35,8 @@ export const initializeNewUser: AsyncAction = async ({
   effects.analytics.setUserId(state.user!.id, state.user!.email);
 
   try {
-    actions.internal.trackCurrentTeams().catch((e) => {});
-    actions.internal.identifyCurrentUser().catch((e) => {});
+    actions.internal.trackCurrentTeams().catch(e => {});
+    actions.internal.identifyCurrentUser().catch(e => {});
   } catch (e) {
     // Not majorly important
   }
@@ -252,7 +252,7 @@ export const setCurrentSandbox: AsyncAction<Sandbox> = async (
   // This can happen when a sandbox is opened that's different from the current
   // sandbox, with completely different files
   if (
-    !sandbox.modules.find((module) => module.shortid === currentModuleShortid)
+    !sandbox.modules.find(module => module.shortid === currentModuleShortid)
   ) {
     const defaultModule = defaultOpenedModule(sandbox, parsedConfigs);
 

From be2d7426aefc9a3660f54f94ea6265fca52a57c3 Mon Sep 17 00:00:00 2001
From: Ives van Hoorne <ives.v.h@gmail.com>
Date: Wed, 16 Sep 2020 11:05:29 +0200
Subject: [PATCH 6/8] Apply new prettier

---
 .../Preview/DevTools/Console/index.tsx        | 12 ++---
 .../Preview/DevTools/Tests/index.tsx          | 48 +++++++++----------
 .../app/components/Preview/DevTools/index.tsx |  8 ++--
 packages/app/src/sandbox/compile.ts           | 22 ++++-----
 .../common/src/components/Preview/index.tsx   |  4 +-
 5 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/packages/app/src/app/components/Preview/DevTools/Console/index.tsx b/packages/app/src/app/components/Preview/DevTools/Console/index.tsx
index 45292c77b29..9abac0c9e5f 100644
--- a/packages/app/src/app/components/Preview/DevTools/Console/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/Console/index.tsx
@@ -63,7 +63,7 @@ class ConsoleComponent extends React.PureComponent<StyledProps, State> {
     }
   }
 
-  handleMessage = (data) => {
+  handleMessage = data => {
     switch (data.type) {
       case 'console': {
         const message = Decode(data.log);
@@ -109,7 +109,7 @@ class ConsoleComponent extends React.PureComponent<StyledProps, State> {
           if (aggregatedResults) {
             const { summaryMessage, failedMessages } = aggregatedResults;
             this.addMessage('log', [summaryMessage]);
-            failedMessages.forEach((t) => {
+            failedMessages.forEach(t => {
               this.addMessage('warn', [t]);
             });
           } else {
@@ -151,8 +151,8 @@ class ConsoleComponent extends React.PureComponent<StyledProps, State> {
       this.props.updateStatus(this.getType(method));
     }
 
-    this.setState((state) =>
-      immer(state, (draft) => {
+    this.setState(state =>
+      immer(state, draft => {
         draft.messages.push({ method, data });
         draft.messages = draft.messages.slice(
           Math.max(0, draft.messages.length - MAX_MESSAGE_COUNT)
@@ -233,7 +233,7 @@ class ConsoleComponent extends React.PureComponent<StyledProps, State> {
     return (
       <Container>
         <Messages
-          ref={(el) => {
+          ref={el => {
             this.list = el;
           }}
         >
@@ -261,7 +261,7 @@ const ConsoleFilterInput = ({ style }) => (
   />
 );
 
-const ConsoleFilterSelect = (props) => {
+const ConsoleFilterSelect = props => {
   const handleOnChange = ({ target: { value } }) => {
     if (value === 'all') {
       dispatch({ type: 'filter-log', filters: [] });
diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/index.tsx
index 03d7d3af522..6a662a647a6 100644
--- a/packages/app/src/app/components/Preview/DevTools/Tests/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/Tests/index.tsx
@@ -239,7 +239,7 @@ class Tests extends React.Component<DevToolProps, State> {
 
   selectFile = (file: File) => {
     this.setStateDebounced(
-      (state) => ({
+      state => ({
         selectedFilePath:
           file.fileName === state.selectedFilePath ? null : file.fileName,
       }),
@@ -249,8 +249,8 @@ class Tests extends React.Component<DevToolProps, State> {
 
   toggleFileExpansion = (file: File) => {
     this.setStateDebounced(
-      (oldState) =>
-        immer(oldState, (state) => {
+      oldState =>
+        immer(oldState, state => {
           state.fileExpansionState[file.fileName] = !state.fileExpansionState[
             file.fileName
           ];
@@ -317,10 +317,10 @@ class Tests extends React.Component<DevToolProps, State> {
 
           const files = Object.keys(this.state.files);
           const failingTests = files.filter(
-            (f) => this.getStatus(this.state.files[f]) === 'fail'
+            f => this.getStatus(this.state.files[f]) === 'fail'
           ).length;
           const passingTests = files.filter(
-            (f) => this.getStatus(this.state.files[f]) === 'pass'
+            f => this.getStatus(this.state.files[f]) === 'pass'
           ).length;
 
           if (this.props.updateStatus) {
@@ -338,8 +338,8 @@ class Tests extends React.Component<DevToolProps, State> {
         }
 
         case messages.ADD_FILE: {
-          this.setStateDebounced((oldState) =>
-            immer(oldState, (state) => {
+          this.setStateDebounced(oldState =>
+            immer(oldState, state => {
               state.files[data.path] = {
                 tests: {},
                 fileName: data.path,
@@ -351,8 +351,8 @@ class Tests extends React.Component<DevToolProps, State> {
           break;
         }
         case 'remove_file': {
-          this.setStateDebounced((oldState) =>
-            immer(oldState, (state) => {
+          this.setStateDebounced(oldState =>
+            immer(oldState, state => {
               if (state.files[data.path]) {
                 delete state.files[data.path];
               }
@@ -363,8 +363,8 @@ class Tests extends React.Component<DevToolProps, State> {
           break;
         }
         case messages.FILE_ERROR: {
-          this.setStateDebounced((oldState) =>
-            immer(oldState, (state) => {
+          this.setStateDebounced(oldState =>
+            immer(oldState, state => {
               if (state.files[data.path]) {
                 state.files[data.path].fileError = data.error;
               }
@@ -383,8 +383,8 @@ class Tests extends React.Component<DevToolProps, State> {
         case messages.ADD_TEST: {
           const testName = [...this.currentDescribeBlocks, data.testName];
 
-          this.setStateDebounced((oldState) =>
-            immer(oldState, (state) => {
+          this.setStateDebounced(oldState =>
+            immer(oldState, state => {
               if (!state.files[data.path]) {
                 state.files[data.path] = {
                   tests: {},
@@ -409,8 +409,8 @@ class Tests extends React.Component<DevToolProps, State> {
           const { test } = data;
           const testName = [...test.blocks, test.name];
 
-          this.setStateDebounced((oldState) =>
-            immer(oldState, (state) => {
+          this.setStateDebounced(oldState =>
+            immer(oldState, state => {
               if (!state.files[test.path]) {
                 state.files[test.path] = {
                   tests: {},
@@ -440,8 +440,8 @@ class Tests extends React.Component<DevToolProps, State> {
           const { test } = data;
           const testName = [...test.blocks, test.name];
 
-          this.setStateDebounced((oldState) =>
-            immer(oldState, (state) => {
+          this.setStateDebounced(oldState =>
+            immer(oldState, state => {
               if (!state.files[test.path]) {
                 return;
               }
@@ -529,7 +529,7 @@ class Tests extends React.Component<DevToolProps, State> {
   };
 
   toggleWatching = () => {
-    this.setStateDebounced((state) => ({ watching: !state.watching }), 0);
+    this.setStateDebounced(state => ({ watching: !state.watching }), 0);
     dispatch({
       type: 'set-test-watching',
       watching: !this.state.watching,
@@ -545,8 +545,8 @@ class Tests extends React.Component<DevToolProps, State> {
 
   runTests = (file: File) => {
     this.setStateDebounced(
-      (oldState) =>
-        immer(oldState, (state) => {
+      oldState =>
+        immer(oldState, state => {
           if (state.files[file.fileName]) {
             state.files[file.fileName].tests = {};
           }
@@ -572,15 +572,15 @@ class Tests extends React.Component<DevToolProps, State> {
     const selectedFile = this.state.files[selectedFilePath || ''];
 
     const fileStatuses = {};
-    Object.keys(this.state.files).forEach((path) => {
+    Object.keys(this.state.files).forEach(path => {
       fileStatuses[path] = this.getStatus(this.state.files[path]);
     });
 
     const tests = [];
-    Object.keys(this.state.files).forEach((path) => {
+    Object.keys(this.state.files).forEach(path => {
       const file = this.state.files[path];
       if (file && file.tests) {
-        Object.keys(file.tests).forEach((t) => {
+        Object.keys(file.tests).forEach(t => {
           tests.push(file.tests[t]);
         });
       }
@@ -605,7 +605,7 @@ class Tests extends React.Component<DevToolProps, State> {
             <div style={{ marginTop: '1rem' }}>
               {Object.keys(this.state.files)
                 .sort()
-                .map((fileName) => (
+                .map(fileName => (
                   <TestElement
                     selectFile={this.selectFile}
                     selectedFile={selectedFile}
diff --git a/packages/app/src/app/components/Preview/DevTools/index.tsx b/packages/app/src/app/components/Preview/DevTools/index.tsx
index 60577e54ccc..af337a8de72 100644
--- a/packages/app/src/app/components/Preview/DevTools/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/index.tsx
@@ -248,7 +248,7 @@ export class DevTools extends React.PureComponent<Props, State> {
 
   setHidden = (hidden: boolean) => {
     if (!hidden) {
-      return this.setState((state) => ({
+      return this.setState(state => ({
         status: {
           ...state.status,
           [this.getCurrentPane().id]: null,
@@ -272,7 +272,7 @@ export class DevTools extends React.PureComponent<Props, State> {
     status: 'success' | 'warning' | 'error' | 'info' | 'clear',
     count?: number
   ) => {
-    this.setStateDebounced((state) => {
+    this.setStateDebounced(state => {
       const currentStatus = (status !== 'clear' && state.status[id]) || {
         unread: 0,
         type: 'info',
@@ -321,7 +321,7 @@ export class DevTools extends React.PureComponent<Props, State> {
       const { clientY } = event;
       unFocus(document, window);
       // @ts-ignore
-      this.setState((state) => ({
+      this.setState(state => ({
         startY: clientY,
         startHeight: state.height,
         mouseDown: true,
@@ -491,7 +491,7 @@ export class DevTools extends React.PureComponent<Props, State> {
 
     return (
       <Container
-        ref={(el) => {
+        ref={el => {
           this.node = el || this.node;
 
           if (this.node) {
diff --git a/packages/app/src/sandbox/compile.ts b/packages/app/src/sandbox/compile.ts
index 2b8adbd059c..b51c1eb714a 100644
--- a/packages/app/src/sandbox/compile.ts
+++ b/packages/app/src/sandbox/compile.ts
@@ -218,7 +218,7 @@ function getDependencies(
   // Add all babel plugins/presets to whitelisted dependencies
   if (configurations && configurations.babel && configurations.babel.parsed) {
     flatten(configurations.babel.parsed.presets || [])
-      .filter((p) => typeof p === 'string')
+      .filter(p => typeof p === 'string')
       .forEach((p: string) => {
         const [first, ...parts] = p.split('/');
         const prefixedName = p.startsWith('@')
@@ -230,7 +230,7 @@ function getDependencies(
       });
 
     flatten(configurations.babel.parsed.plugins || [])
-      .filter((p) => typeof p === 'string')
+      .filter(p => typeof p === 'string')
       .forEach((p: string) => {
         const [first, ...parts] = p.split('/');
         const prefixedName = p.startsWith('@')
@@ -242,7 +242,7 @@ function getDependencies(
       });
   }
 
-  Object.keys(d).forEach((dep) => {
+  Object.keys(d).forEach(dep => {
     const usedDep = DEPENDENCY_ALIASES[dep] || dep;
 
     if (dep === 'reason-react') {
@@ -252,7 +252,7 @@ function getDependencies(
     returnedDependencies[usedDep] = d[dep];
   });
 
-  Object.keys(devDependencies).forEach((dep) => {
+  Object.keys(devDependencies).forEach(dep => {
     const usedDep = DEPENDENCY_ALIASES[dep] || dep;
 
     if (foundWhitelistedDevDependencies.indexOf(usedDep) > -1) {
@@ -303,7 +303,7 @@ function getDependencies(
   returnedDependencies.csbbust = '1.0.0';
   returnedDependencies['node-libs-browser'] = '2.2.0';
 
-  preinstalledDependencies.forEach((dep) => {
+  preinstalledDependencies.forEach(dep => {
     if (returnedDependencies[dep]) {
       delete returnedDependencies[dep];
     }
@@ -335,7 +335,7 @@ async function updateManager(
 ): Promise<TranspiledModule[]> {
   manager.updateConfigurations(configurations);
   await manager.preset.setup(manager);
-  return manager.updateData(managerModules).then((x) => {
+  return manager.updateData(managerModules).then(x => {
     changedModuleCount = x.length;
     return x;
   });
@@ -453,12 +453,12 @@ async function compile({
     const configurations = parseConfigurations(
       template,
       templateDefinition.configurationFiles,
-      (path) => modules[path]
+      path => modules[path]
     );
 
     const errors = Object.keys(configurations)
-      .map((c) => configurations[c])
-      .filter((x) => x.error);
+      .map(c => configurations[c])
+      .filter(x => x.error);
 
     if (errors.length) {
       const e = new Error(
@@ -539,7 +539,7 @@ async function compile({
 
     const foundMain = isModuleView
       ? entry
-      : possibleEntries.find((p) => Boolean(modules[p]));
+      : possibleEntries.find(p => Boolean(modules[p]));
 
     if (!foundMain) {
       throw new Error(
@@ -593,7 +593,7 @@ async function compile({
 
       if (!manager.webpackHMR) {
         const htmlEntries = templateDefinition.getHTMLEntries(configurations);
-        const htmlModulePath = htmlEntries.find((p) => Boolean(modules[p]));
+        const htmlModulePath = htmlEntries.find(p => Boolean(modules[p]));
         const htmlModule = modules[htmlModulePath];
 
         const { head, body } = getHTMLParts(
diff --git a/packages/common/src/components/Preview/index.tsx b/packages/common/src/components/Preview/index.tsx
index 0d46550c066..462e794db74 100644
--- a/packages/common/src/components/Preview/index.tsx
+++ b/packages/common/src/components/Preview/index.tsx
@@ -380,7 +380,7 @@ class BasePreview extends React.Component<Props, State> {
     const modulesObject: IModulesByPath = {};
     const { sandbox } = this.props;
 
-    sandbox.modules.forEach((m) => {
+    sandbox.modules.forEach(m => {
       const path = getModulePath(sandbox.modules, sandbox.directories, m.id);
       if (path) {
         modulesObject[path] = {
@@ -503,7 +503,7 @@ class BasePreview extends React.Component<Props, State> {
     });
   };
 
-  refreshHashedUrl = (url) => {
+  refreshHashedUrl = url => {
     if (!url.includes('#')) {
       return;
     }

From 1acd5d9439603ae3b4d7f425a22886aa4273e3e5 Mon Sep 17 00:00:00 2001
From: Ives van Hoorne <ives.v.h@gmail.com>
Date: Wed, 16 Sep 2020 11:38:44 +0200
Subject: [PATCH 7/8] Move everything to

---
 .../app/components/Preview/DevTools/index.tsx | 56 +++++++++++--------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/packages/app/src/app/components/Preview/DevTools/index.tsx b/packages/app/src/app/components/Preview/DevTools/index.tsx
index af337a8de72..d4ebb002504 100644
--- a/packages/app/src/app/components/Preview/DevTools/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/index.tsx
@@ -153,7 +153,8 @@ export class DevTools extends React.PureComponent<Props, State> {
     setStateFunc:
       | Partial<State>
       | ((state: State, props: Props) => Partial<State>),
-    time = 200
+    time = 200,
+    callback?: () => void
   ) => {
     const draftState = this.draftState || this.state;
 
@@ -169,7 +170,7 @@ export class DevTools extends React.PureComponent<Props, State> {
 
     const updateFunc = () => {
       if (this.draftState) {
-        this.setState(this.draftState);
+        this.setState(this.draftState, callback);
       }
 
       this.draftState = null;
@@ -187,7 +188,7 @@ export class DevTools extends React.PureComponent<Props, State> {
     if (typeof this.state.height === 'string') {
       const { height } = el.getBoundingClientRect();
 
-      this.setState({ height });
+      this.setStateDebounced({ height }, 0);
     }
   };
 
@@ -248,16 +249,19 @@ export class DevTools extends React.PureComponent<Props, State> {
 
   setHidden = (hidden: boolean) => {
     if (!hidden) {
-      return this.setState(state => ({
-        status: {
-          ...state.status,
-          [this.getCurrentPane().id]: null,
-        },
-        hidden: false,
-      }));
+      return this.setStateDebounced(
+        state => ({
+          status: {
+            ...state.status,
+            [this.getCurrentPane().id]: null,
+          },
+          hidden: false,
+        }),
+        0
+      );
     }
 
-    return this.setState({ hidden }, () => {
+    return this.setStateDebounced({ hidden }, 0, () => {
       if (this.props.setDevToolsOpen) {
         const { setDevToolsOpen } = this.props;
         setTimeout(() => setDevToolsOpen(!this.state.hidden), 100);
@@ -320,12 +324,15 @@ export class DevTools extends React.PureComponent<Props, State> {
     if (!this.state.mouseDown && typeof this.state.height === 'number') {
       const { clientY } = event;
       unFocus(document, window);
-      // @ts-ignore
-      this.setState(state => ({
-        startY: clientY,
-        startHeight: state.height,
-        mouseDown: true,
-      }));
+      this.setStateDebounced(
+        // @ts-ignore
+        state => ({
+          startY: clientY,
+          startHeight: state.height,
+          mouseDown: true,
+        }),
+        0
+      );
       if (this.props.setDragging) {
         this.props.setDragging(true);
       }
@@ -338,7 +345,7 @@ export class DevTools extends React.PureComponent<Props, State> {
 
   handleMouseUp = (e: Event) => {
     if (this.state.mouseDown) {
-      this.setState({ mouseDown: false });
+      this.setStateDebounced({ mouseDown: false }, 0);
       if (this.props.setDragging) {
         this.props.setDragging(false);
       }
@@ -382,9 +389,12 @@ export class DevTools extends React.PureComponent<Props, State> {
         this.state.startHeight - (event.clientY - this.state.startY)
       );
 
-      this.setState({
-        height: Math.max(this.closedHeight() - 2, newHeight),
-      });
+      this.setStateDebounced(
+        {
+          height: Math.max(this.closedHeight() - 2, newHeight),
+        },
+        0
+      );
       this.setHidden(newHeight < 64);
     }
   };
@@ -412,7 +422,7 @@ export class DevTools extends React.PureComponent<Props, State> {
     TweenMax.to(heightObject, 0.3, {
       height: store.get('devtools.height') || 300,
       onUpdate: () => {
-        this.setState(heightObject);
+        this.setStateDebounced(heightObject, 0);
       },
       ease: Elastic.easeOut.config(0.25, 1),
     });
@@ -427,7 +437,7 @@ export class DevTools extends React.PureComponent<Props, State> {
     TweenMax.to(heightObject, 0.3, {
       height: this.closedHeight(),
       onUpdate: () => {
-        this.setState(heightObject);
+        this.setStateDebounced(heightObject, 0);
       },
       ease: Elastic.easeOut.config(0.25, 1),
     });

From 375d191f02b36aa17595da870a90f4fd2761b588 Mon Sep 17 00:00:00 2001
From: Ives van Hoorne <ives.v.h@gmail.com>
Date: Wed, 16 Sep 2020 11:41:44 +0200
Subject: [PATCH 8/8] Rename 'setStateDebounced' to 'setStateDelayedFlush'

---
 .../Preview/DevTools/Tests/index.tsx          | 32 +++++++++----------
 .../app/components/Preview/DevTools/index.tsx | 20 ++++++------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/index.tsx
index 6a662a647a6..6d8205bf3c0 100644
--- a/packages/app/src/app/components/Preview/DevTools/Tests/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/Tests/index.tsx
@@ -186,7 +186,7 @@ class Tests extends React.Component<DevToolProps, State> {
    * Every setState call will have to go through this, otherwise we get race conditions
    * where the underlying state has changed, but the draftState didn't change.
    */
-  setStateDebounced = (
+  setStateDelayedFlush = (
     setStateFunc:
       | Partial<State>
       | ((state: State, props: DevToolProps) => Partial<State>),
@@ -222,7 +222,7 @@ class Tests extends React.Component<DevToolProps, State> {
 
   UNSAFE_componentWillReceiveProps(nextProps: DevToolProps) {
     if (nextProps.sandboxId !== this.props.sandboxId) {
-      this.setStateDebounced(
+      this.setStateDelayedFlush(
         {
           files: {},
           selectedFilePath: null,
@@ -238,7 +238,7 @@ class Tests extends React.Component<DevToolProps, State> {
   }
 
   selectFile = (file: File) => {
-    this.setStateDebounced(
+    this.setStateDelayedFlush(
       state => ({
         selectedFilePath:
           file.fileName === state.selectedFilePath ? null : file.fileName,
@@ -248,7 +248,7 @@ class Tests extends React.Component<DevToolProps, State> {
   };
 
   toggleFileExpansion = (file: File) => {
-    this.setStateDebounced(
+    this.setStateDelayedFlush(
       oldState =>
         immer(oldState, state => {
           state.fileExpansionState[file.fileName] = !state.fileExpansionState[
@@ -283,7 +283,7 @@ class Tests extends React.Component<DevToolProps, State> {
           if (this.props.updateStatus) {
             this.props.updateStatus('clear');
           }
-          this.setStateDebounced(INITIAL_STATE, 0);
+          this.setStateDelayedFlush(INITIAL_STATE, 0);
           break;
         }
         case 'test_count': {
@@ -299,7 +299,7 @@ class Tests extends React.Component<DevToolProps, State> {
           if (this.props.updateStatus) {
             this.props.updateStatus('clear');
           }
-          this.setStateDebounced(
+          this.setStateDelayedFlush(
             {
               running: true,
             },
@@ -308,7 +308,7 @@ class Tests extends React.Component<DevToolProps, State> {
           break;
         }
         case messages.TOTAL_TEST_END: {
-          this.setStateDebounced(
+          this.setStateDelayedFlush(
             {
               running: false,
             },
@@ -338,7 +338,7 @@ class Tests extends React.Component<DevToolProps, State> {
         }
 
         case messages.ADD_FILE: {
-          this.setStateDebounced(oldState =>
+          this.setStateDelayedFlush(oldState =>
             immer(oldState, state => {
               state.files[data.path] = {
                 tests: {},
@@ -351,7 +351,7 @@ class Tests extends React.Component<DevToolProps, State> {
           break;
         }
         case 'remove_file': {
-          this.setStateDebounced(oldState =>
+          this.setStateDelayedFlush(oldState =>
             immer(oldState, state => {
               if (state.files[data.path]) {
                 delete state.files[data.path];
@@ -363,7 +363,7 @@ class Tests extends React.Component<DevToolProps, State> {
           break;
         }
         case messages.FILE_ERROR: {
-          this.setStateDebounced(oldState =>
+          this.setStateDelayedFlush(oldState =>
             immer(oldState, state => {
               if (state.files[data.path]) {
                 state.files[data.path].fileError = data.error;
@@ -383,7 +383,7 @@ class Tests extends React.Component<DevToolProps, State> {
         case messages.ADD_TEST: {
           const testName = [...this.currentDescribeBlocks, data.testName];
 
-          this.setStateDebounced(oldState =>
+          this.setStateDelayedFlush(oldState =>
             immer(oldState, state => {
               if (!state.files[data.path]) {
                 state.files[data.path] = {
@@ -409,7 +409,7 @@ class Tests extends React.Component<DevToolProps, State> {
           const { test } = data;
           const testName = [...test.blocks, test.name];
 
-          this.setStateDebounced(oldState =>
+          this.setStateDelayedFlush(oldState =>
             immer(oldState, state => {
               if (!state.files[test.path]) {
                 state.files[test.path] = {
@@ -440,7 +440,7 @@ class Tests extends React.Component<DevToolProps, State> {
           const { test } = data;
           const testName = [...test.blocks, test.name];
 
-          this.setStateDebounced(oldState =>
+          this.setStateDelayedFlush(oldState =>
             immer(oldState, state => {
               if (!state.files[test.path]) {
                 return;
@@ -529,7 +529,7 @@ class Tests extends React.Component<DevToolProps, State> {
   };
 
   toggleWatching = () => {
-    this.setStateDebounced(state => ({ watching: !state.watching }), 0);
+    this.setStateDelayedFlush(state => ({ watching: !state.watching }), 0);
     dispatch({
       type: 'set-test-watching',
       watching: !this.state.watching,
@@ -537,14 +537,14 @@ class Tests extends React.Component<DevToolProps, State> {
   };
 
   runAllTests = () => {
-    this.setStateDebounced({ files: {} }, 0);
+    this.setStateDelayedFlush({ files: {} }, 0);
     dispatch({
       type: 'run-all-tests',
     });
   };
 
   runTests = (file: File) => {
-    this.setStateDebounced(
+    this.setStateDelayedFlush(
       oldState =>
         immer(oldState, state => {
           if (state.files[file.fileName]) {
diff --git a/packages/app/src/app/components/Preview/DevTools/index.tsx b/packages/app/src/app/components/Preview/DevTools/index.tsx
index d4ebb002504..8785987debf 100644
--- a/packages/app/src/app/components/Preview/DevTools/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/index.tsx
@@ -149,7 +149,7 @@ export class DevTools extends React.PureComponent<Props, State> {
    * Every setState call will have to go through this, otherwise we get race conditions
    * where the underlying state has changed, but the draftState didn't change.
    */
-  setStateDebounced = (
+  setStateDelayedFlush = (
     setStateFunc:
       | Partial<State>
       | ((state: State, props: Props) => Partial<State>),
@@ -188,7 +188,7 @@ export class DevTools extends React.PureComponent<Props, State> {
     if (typeof this.state.height === 'string') {
       const { height } = el.getBoundingClientRect();
 
-      this.setStateDebounced({ height }, 0);
+      this.setStateDelayedFlush({ height }, 0);
     }
   };
 
@@ -249,7 +249,7 @@ export class DevTools extends React.PureComponent<Props, State> {
 
   setHidden = (hidden: boolean) => {
     if (!hidden) {
-      return this.setStateDebounced(
+      return this.setStateDelayedFlush(
         state => ({
           status: {
             ...state.status,
@@ -261,7 +261,7 @@ export class DevTools extends React.PureComponent<Props, State> {
       );
     }
 
-    return this.setStateDebounced({ hidden }, 0, () => {
+    return this.setStateDelayedFlush({ hidden }, 0, () => {
       if (this.props.setDevToolsOpen) {
         const { setDevToolsOpen } = this.props;
         setTimeout(() => setDevToolsOpen(!this.state.hidden), 100);
@@ -276,7 +276,7 @@ export class DevTools extends React.PureComponent<Props, State> {
     status: 'success' | 'warning' | 'error' | 'info' | 'clear',
     count?: number
   ) => {
-    this.setStateDebounced(state => {
+    this.setStateDelayedFlush(state => {
       const currentStatus = (status !== 'clear' && state.status[id]) || {
         unread: 0,
         type: 'info',
@@ -324,7 +324,7 @@ export class DevTools extends React.PureComponent<Props, State> {
     if (!this.state.mouseDown && typeof this.state.height === 'number') {
       const { clientY } = event;
       unFocus(document, window);
-      this.setStateDebounced(
+      this.setStateDelayedFlush(
         // @ts-ignore
         state => ({
           startY: clientY,
@@ -345,7 +345,7 @@ export class DevTools extends React.PureComponent<Props, State> {
 
   handleMouseUp = (e: Event) => {
     if (this.state.mouseDown) {
-      this.setStateDebounced({ mouseDown: false }, 0);
+      this.setStateDelayedFlush({ mouseDown: false }, 0);
       if (this.props.setDragging) {
         this.props.setDragging(false);
       }
@@ -389,7 +389,7 @@ export class DevTools extends React.PureComponent<Props, State> {
         this.state.startHeight - (event.clientY - this.state.startY)
       );
 
-      this.setStateDebounced(
+      this.setStateDelayedFlush(
         {
           height: Math.max(this.closedHeight() - 2, newHeight),
         },
@@ -422,7 +422,7 @@ export class DevTools extends React.PureComponent<Props, State> {
     TweenMax.to(heightObject, 0.3, {
       height: store.get('devtools.height') || 300,
       onUpdate: () => {
-        this.setStateDebounced(heightObject, 0);
+        this.setStateDelayedFlush(heightObject, 0);
       },
       ease: Elastic.easeOut.config(0.25, 1),
     });
@@ -437,7 +437,7 @@ export class DevTools extends React.PureComponent<Props, State> {
     TweenMax.to(heightObject, 0.3, {
       height: this.closedHeight(),
       onUpdate: () => {
-        this.setStateDebounced(heightObject, 0);
+        this.setStateDelayedFlush(heightObject, 0);
       },
       ease: Elastic.easeOut.config(0.25, 1),
     });