S
SolidJS3w ago
odili

Dynamic meta - computations outside createRoot warning

Navigating from a blog page ([slug].tsx) to the blog index/list page shows the computations created outside a createRoot or render will never be disposed warning. Here is the snippet of the line referenced from the browser:
<Title>{blog()?.title}</Title>
<Title>{blog()?.title}</Title>
And the [slug].tsx is here:
// ---- more code here ........
export const route: RouteDefinition = {
preload: ({ params }) => {
getBlog(params.slug);
},
};

export default function BlogPost() {
const { slug } = useParams();
const blog = createAsync(() => getBlog(slug));
return (
<>
<Show when={blog()}>
<Title>{blog()?.title}</Title>
<Meta name="description" content={blog()?.teaser} />
</Show>

<section class="blog-page">
<div class="container">
<article></article>
</div>
</section>
</>
);
}
// ---- more code here ........
export const route: RouteDefinition = {
preload: ({ params }) => {
getBlog(params.slug);
},
};

export default function BlogPost() {
const { slug } = useParams();
const blog = createAsync(() => getBlog(slug));
return (
<>
<Show when={blog()}>
<Title>{blog()?.title}</Title>
<Meta name="description" content={blog()?.teaser} />
</Show>

<section class="blog-page">
<div class="container">
<article></article>
</div>
</section>
</>
);
}
What could be wrong and where should I look?
2 Replies
Maciek50322
Maciek503223w ago
The code you show doesn't seem to create any computation outside reactive scope, so it's probably inside one of your functions Title or getBlog (which is related to blog()?.title part)
odili
odiliOP3w ago
@Maciek50322 Thank you for helping out. getBlog is thequery in the [slug].tsx route to handle backend fetching of the blog with the slug string. <Title> is from @solidjs/meta. So I'm kinda surprised with the warning.

Did you find this page helpful?