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 3c39d7b2a7a..9abac0c9e5f 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,17 +27,27 @@ const StyledClearIcon = styled(ClearIcon)`
   font-size: 0.8em;
 `;
 
-class ConsoleComponent extends React.Component<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: [],
-    initialClear: true,
     filter: [],
     searchKeywords: '',
   };
 
   listener;
 
-  constructor(props) {
+  constructor(props: StyledProps) {
     super(props);
 
     this.scrollToBottom = debounce(this.scrollToBottom, 1 / 60);
@@ -75,13 +85,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': {
@@ -147,22 +152,18 @@ class ConsoleComponent extends React.Component<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);
     }
@@ -273,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/components/Preview/DevTools/Tests/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/index.tsx
index 77323bafdf5..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,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) => {
+  setStateDelayedFlush = (
+    setStateFunc:
+      | Partial<State>
+      | ((state: State, props: DevToolProps) => Partial<State>),
+    time = 200
+  ) => {
     const draftState = this.draftState || this.state;
 
     const newState =
@@ -217,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,
@@ -233,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,
@@ -243,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[
@@ -278,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': {
@@ -294,7 +299,7 @@ class Tests extends React.Component<DevToolProps, State> {
           if (this.props.updateStatus) {
             this.props.updateStatus('clear');
           }
-          this.setStateDebounced(
+          this.setStateDelayedFlush(
             {
               running: true,
             },
@@ -303,7 +308,7 @@ class Tests extends React.Component<DevToolProps, State> {
           break;
         }
         case messages.TOTAL_TEST_END: {
-          this.setStateDebounced(
+          this.setStateDelayedFlush(
             {
               running: false,
             },
@@ -333,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: {},
@@ -346,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];
@@ -358,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;
@@ -378,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] = {
@@ -404,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] = {
@@ -435,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;
@@ -524,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,
@@ -532,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 dc878e3526c..8785987debf 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,11 +140,55 @@ 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.
+   */
+  setStateDelayedFlush = (
+    setStateFunc:
+      | Partial<State>
+      | ((state: State, props: Props) => Partial<State>),
+    time = 200,
+    callback?: () => void
+  ) => {
+    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, callback);
+      }
+
+      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();
 
-      this.setState({ height });
+      this.setStateDelayedFlush({ height }, 0);
     }
   };
 
@@ -204,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.setStateDelayedFlush(
+        state => ({
+          status: {
+            ...state.status,
+            [this.getCurrentPane().id]: null,
+          },
+          hidden: false,
+        }),
+        0
+      );
     }
 
-    return this.setState({ hidden }, () => {
+    return this.setStateDelayedFlush({ hidden }, 0, () => {
       if (this.props.setDevToolsOpen) {
         const { setDevToolsOpen } = this.props;
         setTimeout(() => setDevToolsOpen(!this.state.hidden), 100);
@@ -228,39 +276,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;
-
-    if (
-      status === 'success' &&
-      newStatus !== 'error' &&
-      newStatus !== 'warning'
-    ) {
-      newStatus = 'success';
-    } else if (status === 'warning' && newStatus !== 'error') {
-      newStatus = 'warning';
-    } else if (status === 'error') {
-      newStatus = 'error';
-    }
+    this.setStateDelayedFlush(state => {
+      const currentStatus = (status !== 'clear' && state.status[id]) || {
+        unread: 0,
+        type: 'info',
+      };
+      let newStatus = currentStatus.type;
 
-    let unread = currentStatus.unread + (status !== 'clear' ? 1 : 0);
+      if (
+        status === 'success' &&
+        newStatus !== 'error' &&
+        newStatus !== 'warning'
+      ) {
+        newStatus = 'success';
+      } else if (status === 'warning' && newStatus !== 'error') {
+        newStatus = 'warning';
+      } else if (status === 'error') {
+        newStatus = 'error';
+      }
 
-    if (count != null) {
-      unread = count;
-    }
+      let unread = currentStatus.unread + (status !== 'clear' ? 1 : 0);
 
-    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) => {
@@ -275,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.setStateDelayedFlush(
+        // @ts-ignore
+        state => ({
+          startY: clientY,
+          startHeight: state.height,
+          mouseDown: true,
+        }),
+        0
+      );
       if (this.props.setDragging) {
         this.props.setDragging(true);
       }
@@ -293,7 +345,7 @@ export class DevTools extends React.PureComponent<Props, State> {
 
   handleMouseUp = (e: Event) => {
     if (this.state.mouseDown) {
-      this.setState({ mouseDown: false });
+      this.setStateDelayedFlush({ mouseDown: false }, 0);
       if (this.props.setDragging) {
         this.props.setDragging(false);
       }
@@ -337,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.setStateDelayedFlush(
+        {
+          height: Math.max(this.closedHeight() - 2, newHeight),
+        },
+        0
+      );
       this.setHidden(newHeight < 64);
     }
   };
@@ -367,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.setStateDelayedFlush(heightObject, 0);
       },
       ease: Elastic.easeOut.config(0.25, 1),
     });
@@ -382,7 +437,7 @@ export class DevTools extends React.PureComponent<Props, State> {
     TweenMax.to(heightObject, 0.3, {
       height: this.closedHeight(),
       onUpdate: () => {
-        this.setState(heightObject);
+        this.setStateDelayedFlush(heightObject, 0);
       },
       ease: Elastic.easeOut.config(0.25, 1),
     });
diff --git a/packages/app/src/sandbox/compile.ts b/packages/app/src/sandbox/compile.ts
index c331a98753a..b51c1eb714a 100644
--- a/packages/app/src/sandbox/compile.ts
+++ b/packages/app/src/sandbox/compile.ts
@@ -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();
diff --git a/packages/common/src/components/Preview/index.tsx b/packages/common/src/components/Preview/index.tsx
index 48636ccf0a1..462e794db74 100644
--- a/packages/common/src/components/Preview/index.tsx
+++ b/packages/common/src/components/Preview/index.tsx
@@ -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,
         });
       }
     }
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==