Skip to content

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

@aquaductape

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

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