joenano Posts - Answer Overflow

joenano

•Created by joenano on 11/21/2023 in #support

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?

13 replies

Gaming

Programming