Computations created outside a render will never be disposed.

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 });
}