Memory Leak Warning When Using UI Framework

[vagrant iris]

Building my first Astro 1.0 app. So far, everything seems to go smoothly. I did notice though in my browser console that it’s throwing a warning saying some resources may not be properly disposed. This is because I am using a UI framework (SolidJS) for some of my components. I did a bit of digging and it seems (I think) it is because my components don’t have the usual index.ts entry point file like in a normal Solid app.

The Solid integration docs aren’t really saying anything about this. And, I’m not really sure if this is just something with the Solid integration or if it’s common across other UI framework integrations like React (haven’t really tried).

How would I go about silencing that warning? It doesn’t really seem practical to call Solid’s render() at every component file. So, is there another solution?

[warm widget]

What app/tooling is showing you the memory warning? Chances are that app/tool will have links/documentation on how to proceed with diagnosing the issue.

Also, could you please share the actual warning with all relevant details?

[vagrant iris]

The actual warning is ```computations created outside a createRoot or render will never be disposed
createComputation @ dev.js:727

The way I am using solid in my Astro app is as follows.

Suppose I have a Home component like this. ```import { Component, Switch, Match } from 'solid-js';
import TopTabBar from './../elements/tab-bar/TopTabBar';
import PopularReplays from '../replay/PopularReplays';
import LatestReplays from './../replay/LatestReplays';
import { tabs, currentTab, defaultTab, setCurrentTab } from './home.fns';

const Home: Component = () => {

return (
    <>
        <div class = 'w-full'>
            <TopTabBar tabs={tabs} onChange={setCurrentTab} defaultTabIndex={defaultTab} />
            <Switch>
                <Match when={currentTab() === 'Popular'}>
                    <PopularReplays />
                </Match>
                <Match when={currentTab() === 'Latest'}>
                    <LatestReplays />
                </Match>
            </Switch>
        </div>

    </>
);

}

export default Home;```

Then, in my index.astro, I have ```---
import Layout from '../layouts/Layout.astro';
import Home from './../components/solidjs/home/Home';

<Layout title="SplatsView.com">
<main class = 'w-full'>
<Home client:load />
</main>
</Layout>```

Then, one or more of those child components have signals, stores, etc...

I don't think I need to share the code for those, as they can be quite lengthly. But, in summary, they all have something like. const ReplayOverviewGrid: Component<ReplayOverviewGridProps> = (PROPS) => { const [replays, { refetch }] = createResource(true, getPopularReplays); return ( //... ); }

[warm widget]

Are you able to figure out from the line number in the error message (or by reading through your code) where is the computation being created? From the code you have shared, it doesn't look like any computation is being created outside of any solidjs render method.

[vagrant iris]

It just says no owner. I can share the line too if you’d like.

[high zinc]

hey, this happens in Solid whenever code like createMemo or createEffect gets called outside a component tree

Sorry just read through to the end of your example - I can't see anything at first glance but I'd love to investigate this further

[vagrant iris]

Okay. So, how would I fix it? Should I structure all my page-level Solid components to return the render function?

[vagrant iris]

Yeah. That makes sense. I have a few components that use that. And ones that use createStore()

[high zinc]

It should work as-is, if all of the entry points for calling your reactive code starts from a component somewhere... ugh, it's tricky to debug without having the code at hand

Oh, I just remembered! Are you creating any computations from within an async function? Maybe the resource's fetcher?

Like does getPopularReplays make a memo for example

btw, you can refactor createResource(true, getPopularReplays); to just createResource(getPopularReplays)

[vagrant iris]

I do things like save data to local storage. But I don’t have any signals or memories in async functions.

[vagrant iris]

Okay. So, is it okay to just ignore the warnings for now? Not really sure if I should be structuring things differently.

[high zinc]

It's okay to avoid the warnings, yes

It would be nice to figure out whether this is a Solid issue or an Astro one, but that's hard to figure out without rebuilding the components in a Solid app