Vue Template unusable (runaway RAM and CPU usage)

[dereks]

🐛 bug report

Description of the problem

How has this issue affected you? What are you trying to accomplish?

When viewing a vanilla Vue Template sandbox, CodeSandbox.io RAM usage immediately jumps to about 700 MB. Over time, with continued use it will grow to over 1 GB of RAM. Every time I save a file (like HelloWorld.vue), my browser consumes 100% CPU for about 12 seconds while it tries to re-render.

As a side-effect, I am no longer able to preview the HTML output in a new tab at all. When I do this, the CPU and RAM consumption grow non-stop, and the browser endlessly tries to reload both the rendered new tab, and the IDE sandbox tab, with CPU at 100% and RAM steadily increasing. I suspect that the root cause of this symptom (that the new tab will not preview, and that it endlessly reloads) is that my browser is simply running out of RAM.

I am using the Chrome browser's "Task Manager" to see RAM and CPU usage.

I think this is a new bug that happened in the past week or two. I was using Codesandbox.io successfully (including new tab preview) for about three weeks before this happened (on this same laptop). It was a little slow, but it worked well. Now I can't use the preview tab at all, and the sandbox IDE tab is almost unusable.

I tried clearing all of my "codesandbox.io" cookies, cache, and local storage. I tried disabling all of the options under the "Editor" settings of the sandbox. I tried Incognito Mode. Nothing helped.

Link to sandbox: link (optional)

A simple Vue Template sandbox. Browser immediately jumps to ~700MB RAM Usage and 100% CPU usage for many seconds, and it is very slow every time I save with CTRL-S:

https://codesandbox.io/s/4qrvxj3x1x

Then it reloads both tabs forever, with 100% CPU usage (on my laptop) if I preview it at:

https://4qrvxj3x1x.codesandbox.io/

This is a bare Vue template. (I did a minor two-character edit to HelloWorld.vue to test saving the file, but that doesn't matter.)

Your Environment

Software	Name/Version
Сodesandbox
Browser	Chrome 58.0.3029.81 (Official Build) (64-bit)
Operating System	Ubuntu Linux 14.04

[tobiasBora]

I experienced today a very similar experience with 100% CPU on external tab reload, with a simple react templace containing:

import "./styles.css";
import { Button } from "antd";
import { useState, useCallback, memo } from "react";

const WrapperOnClick = memo(({ onClick, index, Component, ...props }) => {
  const onClickWrapped = useCallback((e) => onClick(e, index), [
    onClick,
    index
  ]);
  return <Component {...props} onClick={onClickWrapped} />;
});

const version1naive = memo();

const initialState = ["Egg", "Milk", "Potatoes", "Tomatoes"];
export default function App() {
  const [elements, setElements] = useState(initialState);
  const deleteElement = useCallback(
    (index) => setElements((elts) => elts.filter((e, i) => i != index)),
    []
  );
  return (
    <div className="App">
      <h1>Trying to avoid redraw</h1>
      <h2>Version 1: naive version that should be inneficient</h2>
      <ul>
        {elements.map((e, i) => (
          <li>
            {e} <Button onClick={(e) => deleteElement(i)}>Delete</Button>
          </li>
        ))}
      </ul>
    </div>
  );
}

It is basically impossible to use codesandbox with this issue for me.