Skip to content

Memory leak: devtools holds reference to "cleanup" memo #358

Description

@aquaductape

Solid devtools created_owners inside s.DEV.hooks.afterCreateOwner is holding reference to createMemo (from Child component) inside a Show that is supposed to be cleaned up.

The leak doesn't happen if chrome extension is connected.

const Parent = () => {
  const [value, setValue] = createSignal(1);

  return (
    <>
      <button onClick={() => setValue((prev) => prev + 1)}>Refresh</button>
      <br />
      <Show when={value()} keyed>
        {(_) => {
          return <Child />;
        }}
      </Show>
    </>
  );
};
const Child = () => {
  const allData = createMemo(
    () => {
      return new Array(1e5 * 100).fill(Math.random());
    },
    undefined,
    { name: "ALL_DATA" }
  );

  return <div>{allData()[0]}</div>;
};

Steps to reproduce:

  1. Download repo: https://github.com/aquaductape/solid-devtools-memory-leak
  2. Open Memory tab in chrome devtools
  3. Select "Allocations on Timeline" and then press "Record" icon
  4. Click Refresh button to fire click
  5. Keep clicking at least 10 times
  6. Stop recording on Memory
  7. Look for "{fn, owned, sources, sourceSlots, cleanups, value, owner, context, pure, name, observers, observerSlots, comparator}" or just search "name" on filter
  8. You'll find the duplicated memos that is retained by SolidDevtools with name: "ALL_DATA" based on cleanup amount, how much you triggered via click.
Image

Also you can check Chrome Task Manager or devtools Performance Monitor to see JavaScript Memory increase
Image

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions