SolidJS•7mo ago

Computations created outside a render will never be disposed.

Just wondering whether I can ignore this warning or if its potentially a problem. Basically I have some tab components that are being created in a function and managed in a signal. When a tab is opened I add it to the array and when its closed I remove it from the array.

interface Tab {
    index: number;
    id: string;
    title: string;
    content: JSXElement;
}

const [selectedTab, setSelectedTab] = createSignal<Tab>();
const [tabs, setTabs] = createSignal<Tab[]>([], { equals: false });

export function addTab(event: Event, tab: Tab) {
    setTabs((current) => {
        current.push(tab);
        return current;
    });
}

export function closeTab(tab: Tab) {
    const index = tab.index;
    
    // update indexes of proceeding tabs
    for (let i = index + 1; i < tabs().length; i++) {
        tabs()[i]!.index--;
    }
    
    // remove tab from tabs array
    setTabs((current) => {
        current.splice(index, 1);
        return current;
    });
}

interface Tab {
    index: number;
    id: string;
    title: string;
    content: JSXElement;
}

const [selectedTab, setSelectedTab] = createSignal<Tab>();
const [tabs, setTabs] = createSignal<Tab[]>([], { equals: false });

export function addTab(event: Event, tab: Tab) {
    setTabs((current) => {
        current.push(tab);
        return current;
    });
}

export function closeTab(tab: Tab) {
    const index = tab.index;
    
    // update indexes of proceeding tabs
    for (let i = index + 1; i < tabs().length; i++) {
        tabs()[i]!.index--;
    }
    
    // remove tab from tabs array
    setTabs((current) => {
        current.splice(index, 1);
        return current;
    });
}

function loadSire(event: Event, title: string, sireId: number) {
    const id = `sire-${sireId}`;

    const content = <Content id={id} content={<Sire id={sireId} name={title} />} />;

    const index = tabs().length;

    addTab(event, { index, id, title, content });
}

function loadSire(event: Event, title: string, sireId: number) {
    const id = `sire-${sireId}`;

    const content = <Content id={id} content={<Sire id={sireId} name={title} />} />;

    const index = tabs().length;

    addTab(event, { index, id, title, content });
}

Is the memory handled by the garbage collector when I remove it from tabs array or is the warning related to something else im missing?

8 Replies

lxsmnsyc•7mo ago

loadSire's content is created outside of a root, hence the error I'd suggest rethinking loadSire so that the JSX stays in the JSX, and not separate from it

joenano•7mo ago

I know thats where the warning is coming from, but was hoping it could be ignored as im keeping track of them

lxsmnsyc•7mo ago

for example:

function loadSire(event: Event, title: string, sireId: number) {
    const id = `sire-${sireId}`;

    const index = tabs().length;

    addTab(event, { index, id, title });
}

<For each={tabs()}>
  {({ index, id, title }) => <Content id={id} content={<Sire id={sireId} name={title} />} />}
</For>

function loadSire(event: Event, title: string, sireId: number) {
    const id = `sire-${sireId}`;

    const index = tabs().length;

    addTab(event, { index, id, title });
}

<For each={tabs()}>
  {({ index, id, title }) => <Content id={id} content={<Sire id={sireId} name={title} />} />}
</For>

joenano•7mo ago

wouldnt that rerender every time a new tab is added tho? the point is to avoid rerendeing as there is a lot of data in each tab

lxsmnsyc•7mo ago

No it wouldn't.

joenano•7mo ago

ill give it a try just now actually going to be a bit of a pain to change as different content in the first two tabs im not understanding why there wouldn't be a rerender tho, doesn't the for loop rerun every time tabs() triggers? what I have current is this, so when it triggers there is no recreation of the content component:

<For each={tabs()}>{(item) => item.content}</For>

<For each={tabs()}>{(item) => item.content}</For>

lxsmnsyc•7mo ago

doesn't the for loop rerun every time tabs() triggers?

Nope, that only happens when you do tabs().map(...). For compares each item in the given list and does the following: - moves elements that changed index - inserts new elements - removes elements no longer in the array

joenano•7mo ago

ah thats cool, will spend some time reworking it today then Followed your advice and it worked, no more warning, and no rerenders. Thanks

Gaming

Programming

Computations created outside a render will never be disposed.